.team-details {
  padding: 25px $pad-xlarge 50px; // different to pad sticky subnav properly

  &__loading-spinner {
    // NOTE: this value was chosen just cause it looked right. Might want to
    // come back and change it later to be more exact.
    margin-top: 30vh;
  }

  &__back-link {
    display: flex;
    align-items: center;
    height: 16px;
    font-size: $x-small;
    color: $core-vibrant-blue;
    font-weight: $bold;
    text-decoration: none;
  }

  #back-chevron {
    width: 16px;
    margin-right: $pad-small;
  }

  &__nav-header {
    padding-top: 15px;
    position: sticky;
    top: 0;
    background-color: $core-white;
    z-index: 2;
  }

  &__team-header {
    margin-top: $pad-large;
    display: flex;
    justify-content: space-between;
    margin-bottom: $pad-medium;
  }

  &__team-details {
    display: flex;
    align-items: center;
  }

  &__host-count {
    background-color: $ui-vibrant-blue-25;
    font-size: $xx-small;
    font-weight: $bold;
    border-radius: 30px;
    margin-left: $pad-medium;
    padding: 4px 12px;
  }

  &__team-actions {
    display: flex;

    button {
      margin-left: $pad-small;
    }
  }

  .react-tabs {
    .react-tabs__tab-list {
      border-bottom: 1px solid $ui-gray;
    }

    &__tab {
      font-size: $x-small;
      border: none;
      padding: 0 0 $pad-medium 0;
      margin-left: $pad-xxlarge;
      display: inline-flex;
      flex-direction: column;
      align-items: center;

      &:focus {
        box-shadow: none;
        outline: auto;
      }

      // Bolding text when the tab is active causes a layout shift
      // so we add a hidden pseudo element with the same text string
      &:before {
        content: attr(data-text);
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
        font-weight: $bold;
      }

      &:after {
        background-color: transparent;
      }

      &:first-child {
        margin-left: 0;
      }
    }

    &__tab--selected,
    &__tab--selected:focus {
      font-weight: $bold;
      border-bottom: 1px solid $core-vibrant-blue;
    }
  }
}
