.MIRECO-time-selector
  display: flex
  flex-direction: row
  font-size: 0.875rem
  overflow: hidden

  position: relative
  &:before, &:after
    content: ' '
    z-index: 1
    position: absolute
    left: 0
    width: 100%
    height: 25%
    pointer-events: none
  &:before
    top: 0
    background: linear-gradient(180deg, #fff, rgba(1, 1, 1, 0))
  &:after
    bottom: 0
    background: linear-gradient(0deg, #fff, rgba(1, 1, 1, 0))

  ul
    flex: 1
    list-style: none
    padding: 0 2px
    margin: 0
    width: 6rem
    height: 100%
    box-sizing: border-box
    overflow-y: scroll
    -ms-overflow-style: none
    scrollbar-width: none
    &::-webkit-scrollbar
      display: none

    li
      padding: 0
      margin: 0
      button
        position: relative
        margin: 0
        padding: 0 1rem
        margin: 0
        display: block
        width: 100%
        text-align: center
        outline: none
        border: none
        line-height: 1.2em
        white-space: nowrap
        border-radius: 4px
        &:not(:disabled):not(.disabled)
          cursor: pointer

      button
        background: var(--bs-body-bg)
        color: var(--bs-body-color)
        &:hover
          background: content-hover-colour
      &.current
        button
          background: var(--bs-primary)
          color: primary-button-text-colour
          &:hover
            background: primary-button-hover-colour
      &:not(.current).selected
        button
          background: var(--bs-primary-bg-subtle)
          color: contained-text-colour
          &:hover
            background: contained-hover-colour

      &.invalid
        opacity: 0.1