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

  &.team-settings {
    padding: $pad-xxlarge;
  }

  &__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;
    margin: $pad-medium 0;
  }

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

  &__team-header {
    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-medium;
    }
  }
}
