bb-queue-concierge-staff-person {

  .staff-person {
    @include flex-row;
    border-bottom: border(1);
    padding: spacing(20);

    &__not-serving-this-queue {
      opacity: 0.5;
    }

    &__overdue {
      background-color: $bb-queue-concierge-bg-red;
    }

    &__overdue-marker {
      border-left: border(2, $bb-queue-concierge-red);
    }

    /*--------------- AVATAR STYLES --------------*/
    &__avatar {
      margin-right: spacing(10);
    }

    &__initials {
      align-items: center;
      display: flex;
      justify-content: center;
      color: $bb-queue-concierge-white;
      font-size: 13px;
    }

    &__circle--large {
      @include large-circle;
    }

    &__circle--small {
      @include small-circle;
    }

    /*--------------- STATUS AND ACTIONS STYLES --------------*/
    &__status-and-actions-col {
      flex: 1 1 auto;
    }

    &__info-and-actions-row,
    &__status-info-row {
      @include flex-row;
      flex: 1 1 auto;
      justify-content: space-between;
    }

    &__name-and-availability-col {
      @include column-flex-container;
    }

    &__name {
      font: {
        size: spacing(16);
        weight: $bb-queue-concierge-bold;
      }
      margin: 0;
    }

    &__next-booking,
    &__available-at {
      font: {
        size: $bb-queue-concierge-panel-content;
      }
      margin: {
        top: spacing(5);
      }
    }

    // Actions styles
    &__actions {
      display: flex;
      margin-left: spacing(10);
    }

    &__action-button {
      @include concierge-btn;
      max-height: 36px;

      &--secondary {
        @include concierge-btn-secondary;
      }

      &--disabled {
        @include concierge-btn-disabled;
      }

      &:hover {
        background-color: $bb-queue-concierge-cyan-blue;
      }
    }

    &__popover-container {
      margin-left: spacing(10);
    }

    &__popover-icon {
      @include popover-icon;
    }

    // Now serving styles
    &__progress-bar {
      padding: 12px 0;
    }
  }

  .progress {
    height: spacing(3);
    margin: 0;
    &-bar {
      height: spacing(3);
    }
  }

  .popover {
    @include popover;
    @include popover-dimensions;
    &-content {
      padding: 0;
    }
  }

  p {
    margin: 0;
  }

  a {
    text-decoration: none;
    &:focus {
      border: none;
    }
  }
}