@import '../bootstrap'
@import '../theme'

/** Themes */
time-picker-clock($material)
  background: $material.picker.clock

  > span.disabled
    color: $material.buttons.disabled

    &.active
      color: $material-dark.buttons.disabled

  &--indeterminate
    .time-picker-clock__hand
      background-color: $material.picker.indeterminateTime

      &:after
        color: $material.picker.indeterminateTime

    > span.active
      background-color: $material.picker.indeterminateTime

theme(time-picker-clock, "time-picker-clock")

.time-picker-clock
  border-radius: 100%
  position: relative
  transition: $primary-transition
  user-select: none

  &__container
    display: flex
    align-items: center
    justify-content: center
    padding: 10px

  &__hand
    height: calc(50% - 28px)
    width: 2px
    bottom: 50%
    left: calc(50% - 1px)
    transform-origin: center bottom
    position: absolute
    will-change: transform
    z-index: 1

    &:before
      background: transparent
      border-width: 2px
      border-style: solid
      border-color: inherit
      border-radius: 100%
      width: 10px
      height: 10px
      content: ''
      position: absolute
      top: -3%
      left: 50%
      transform: translate(-50%, -50%)

    &:after
      content: ''
      position: absolute
      height: 8px
      width: 8px
      top: 100%
      left: 50%
      border-radius: 100%
      border-style: solid
      border-color: inherit
      background-color: inherit
      transform: translate(calc(-50%, - 1px), -50%)

  > span
    align-items: center
    border-radius: 100%
    cursor: default
    display: flex
    font-size: $time-picker-number-font-size
    justify-content: center
    left: 'calc(50% - %s / 2)' % $time-picker-indicator-size
    height: $time-picker-indicator-size
    position: absolute
    text-align: center
    top: 'calc(50% - %s / 2)' % $time-picker-indicator-size
    width: $time-picker-indicator-size
    user-select: none

    > span
      z-index: 1

    &:before, &:after
      content: ''
      border-radius: 100%
      position: absolute
      top: 50%
      left: 50%
      height: 14px
      width: 14px
      transform: translate(-50%, -50%)

    &:after, &:before
      height: $time-picker-indicator-size
      width: $time-picker-indicator-size

    &.active
      color: #fff
      cursor: default
      z-index: 2

    &.disabled
      pointer-events: none