.time-select {
  @extend .context;

  display: flex;
  flex-direction: column;

  ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: (6 * (24px + 4px + 4px)) + 40px;
    min-height: 0;
    width: 92px;
    overflow: auto;

    &::before,
    &::after {
      content: '';
      display: block;
      height: 10px;
      width: 100%;
    }
  }

  li {
    display: block;
    padding: 4px 6px;
  }

  a {
    display: block;
    line-height: 28px;
    text-align: center;
    color: $color-neutral-900;
    white-space: nowrap;
    @include rounded($rounded);

    &:hover {
      background-color: $color-neutral-100;
      text-decoration: none;
    }

    &.active {
      background-color: $color-primary-500;
      color: $white;
    }
  }
}