bb-queue-single-staff-panel {

  .content,
  .bb-content {
    padding: 0 !important;
  }

  p {
    margin: 0
  }

  .single-staff-panel {

    &__panel-row {
      @include flex-row;
      align-items: center;
      background-color: $bb-queue-concierge-bg-gray;
      border: border(1, $bb-queue-concierge-cobalt-gray);
      margin-bottom: spacing(20);
      padding: {
        top: spacing(18);
        right: spacing(20);
        bottom: spacing(16);
        left: spacing(20);
      }
      &--available {
        background-color: $bb-queue-concierge-bg-green;
        border: border(1, $bb-queue-concierge-green);
      }
      &--now-serving {
        background-color: $bb-queue-concierge-bg-yellow;
        border: border(1, $bb-queue-concierge-yellow);
      }
      &--overdue {
        background-color: $bb-queue-concierge-bg-red;
        border: border(1, $bb-queue-concierge-red);
      }
    }

    &__avatar-column {
      @include flex-column(5%);
    }

    &__staff-person-info-column {
      @include flex-column(70%);
    }

    &__actions-row {
      @include flex-row;
    }

    &__actions-column {
      @include flex-column(25%);
    }

    &__button-column {
      @include flex-column(90%);
      @include flex-right-align-items;
      &--no-popover {
        @include flex-column(100%);
      }
    }

    &__popover-column {
      @include flex-column(10%);
    }

    &__action-button {
      @include concierge-btn;
      @include concierge-btn-primary;
    }

    &__initials {
      @include flex-row;
      align-items: center;
      color: $bb-queue-concierge-white;
      font-size: spacing(13);
      justify-content: center;
    }

    &__circle--large {
      @include large-circle;
      height: spacing(46);
      width: spacing(46);
    }

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

    &__name,
    &__status,
    &__queuer-info {
      font: {
        size: $bb-queue-concierge-single-staff-content;
      }
      margin: 0;
    }

    &__name {
      font: {
        weight: $bb-queue-concierge-bold;;
      }
    }

    &__available-at {
      font: {
        size: $bb-queue-concierge-single-staff-content;
      }
      margin: {
        top: spacing(5);
      }
    }

    &__status {
      text-transform: capitalize;
    }

    &__action-btn {
      @include concierge-btn;
      &--primary {
        @include concierge-btn-primary;
      }
      &--secondary {
        @include concierge-btn-secondary;
      }
      &--disabled {
        @include concierge-btn-disabled;
      }
    }

    &__popover-container {
      @include popover-container;
      @include flex-right-align-items;
      padding-left: spacing(10);
    }

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

  .popover {
    @include popover;
    &-content {
      padding: 0;
    }
    min-width: spacing(312);
  }
}