@use '../../styles/utils' as *

.custom_wheel_container
  position: relative
  height: attr(data-container-height)
  width: 100%

  .scroll_selector_area
    position: absolute
    border-top: $size-1px solid $light-grey
    border-bottom: $size-1px solid $light-grey
    width: 99%
    height: attr(data-item-height)
    top: attr(data-dynamic-space)

    .scroll_select_list
      display: flex
      flex-direction: column
      overflow-y: scroll
      height: 100%
      color: $darker-grey
      position: relative
      perspective: 1000px

    .wheel_list_container
      padding: attr(data-dynamic-space)

    .scroll_select_list::-webkit-scrollbar
      width: 0 !important

    .scroll_item
      text-align: center
      padding-right: $size-10px
      margin: 0 auto
      width: 100%
      color: $light-grey

    .selected_time
      color: $black
      font-weight: bold
      transition: all 0.3s

    .scroll_item,
    .scroll_item_container
      min-height: attr(data-item-height)
      max-height: attr(data-item-height)

    .wheel_item
      background: $medium-grey
      border: $size-1px solid $dark-border-grey

    .scroll_item:hover
      cursor: pointer

@include mixin-responsive
  .wheel_list_container
    padding: attr(data-dynamic-space) $size-20px