a.x-timer-toggle {

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

  &.x-timer-active {
    background: theme-color('secondary') !important;
    transition: background 1s ease-in-out;
    @include pulse-darken(1.5s, 3s, theme-color('secondary'));
  }

}


.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;
    }

  }
}