.page--contest_team
  .is-hidden
    display: none !important

  .team-invites-banner
    background: lighten($progress-color, 38%)
    border: 1px solid lighten($progress-color, 26%)
    border-left: 4px solid $progress-color
    border-radius: rem(4px)
    padding: rem(12px) rem(14px)
    margin-bottom: rem($section-margin)

    &__head
      display: flex
      align-items: center
      gap: rem(8px)
      font-weight: 600
      color: darken($progress-color, 28%)
      margin-bottom: rem(8px)

      .icon
        font-size: rem(18px)

    &__list
      list-style: none
      margin: 0
      padding: 0

    &__row
      display: flex
      align-items: center
      justify-content: space-between
      gap: rem(10px)
      padding: rem(5px) 0

      &:not(:last-child)
        border-bottom: 1px solid rgba(#000, 0.06)

    &__actions
      display: flex
      gap: rem(8px)

      form
        margin: 0

  .team-card
    background: $content-bg-color
    border: 1px solid $border-2-color
    border-radius: rem(4px)
    padding: rem(14px) rem(16px)
    margin-bottom: rem($section-gap-v)

    &__header
      display: flex
      align-items: center
      justify-content: space-between
      gap: rem(10px)

    &__title
      h3
        font-size: rem($font-size-title)
        margin: 0
        display: inline

    &__meta
      display: flex
      align-items: center
      gap: rem(8px)

    &__count
      display: inline-flex
      align-items: center
      gap: rem(4px)
      color: $text-3-color
      font-size: rem($font-size-small)

    &__rename
      display: flex
      align-items: center
      gap: rem(8px)
      margin: rem(10px) 0 0

      .textbox
        flex: 1

    &__section
      margin-top: rem(12px)

    &__label
      color: $text-3-color
      font-size: rem($font-size-small)
      margin: 0 0 rem(6px)

    &__list
      list-style: none
      margin: 0
      padding: 0

    &__row
      display: flex
      align-items: center
      justify-content: space-between
      gap: rem(10px)
      padding: rem(5px) 0

      &:not(:last-child)
        border-bottom: 1px solid rgba(#000, 0.05)

    &__actions
      display: flex
      flex-wrap: wrap
      gap: rem(8px)
      margin-top: rem(14px)
      padding-top: rem(12px)
      border-top: 1px solid $table-border-color

      form
        margin: 0

  .team-create-form
    .textbox
      margin-bottom: rem(8px)

  +mobile()
    .team-card
      &__header
        flex-wrap: wrap

      &__actions
        .button
          flex: 1