a.x-timer-toggle {
  .show > & {
    @extend .bg-dark;
    @include hover-focus-active {
      background-color: theme-color('dark') !important;
    }
  }

}

.x-timer-display {
  @extend %font-size-lg,
          .font-weight-normal,
          .d-flex,
          .align-items-center;
}

.x-timer-dropdown-menu {
  @extend .m-0,
          .p-0,
          .border-0;
  width: 25rem; // 400px
}

.x-timer-dropdown-header {
  @extend .d-flex,
          .align-items-center,
          .justify-content-between,
          .bg-dark,
          .text-white,
          .p-3;

  .x-timer-dropdown-info {
    @extend .mr-1,
            .w-30,
            .flex-auto;

    > * {
      @extend .d-block,
              .text-truncate;
    }

    p,
    small {
      @extend .mb-1,
              .text-info;
    }
  }

  .x-timer-icon {
    @extend .mr-1;
    font-size: 2rem;
    line-height: 0;
  }
}

.x-timer-dropdown-content {
  @extend .x-list-group-content,
          .overflow-auto;
  max-height: 25rem; // 400px

  .list-group-item {

    &:last-child {
      @extend .border-bottom-0;
    }

    > * {
      @extend .d-block,
              .text-truncate;
    }

    h6 {
      @extend .font-weight-bold,
              .text-primary,
              .text-uppercase,
              .mb-0;
    }

    span {
      @extend %font-size-sm,
             .text-grey;
    }

  }
}