.q-time
  max-width 100%
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  outline none

  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
    font-weight 300

  &__header-label
    font-size 28px
    line-height 1
    letter-spacing -0.00833em

    > div + div
      margin-left 4px

  &__link
    opacity .56
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1

  &__header-ampm
    font-size 16px
    letter-spacing 0.1em

  &__content
    padding 16px

    &:before
      content ''
      display block
      padding-bottom 100%

  &__container-parent
    padding 16px

  &__container-child
    border-radius 50%
    background rgba(0, 0, 0, .12)

  &__clock
    padding 24px
    width 100%
    height 100%
    max-width 100%
    max-height 100%
    font-size 14px

  &__clock-circle
    position relative

  &__clock-center
    height 6px
    width 6px
    margin auto
    border-radius 50%
    min-height 0
    background currentColor

  &__clock-pointer
    width 1px
    height 50%
    transform-origin top center /* rtl:ignore */
    min-height 0
    position absolute
    left 50%
    right 0
    bottom 0
    color $primary
    color var(--q-color-primary)
    background currentColor
    transform translate3d(-50%, 0, 0)

    &:before, &:after
      content ''
      position absolute
      left 0
      border-radius 50%
      background currentColor
      transform translate3d(-44%, 0, 0)
    &:before
      bottom -4px
      width 8px
      height 8px
    &:after
      top -3px
      height 6px
      width 6px

  &__clock-position
    position absolute
    min-height 32px
    width 32px
    height 32px
    font-size 12px
    line-height 32px
    margin 0
    padding 0
    transform translate3d(-50%, -50%, 0) /* rtl:ignore */
    border-radius 50%

    &--disable
      opacity .4

    &--active
      background-color $primary
      background-color var(--q-color-primary)
      color white

  for $pos in 0..11
    $degree = (270 + 30 * $pos)
    &__clock-pos-{$pos}
      top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
      left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */

  for $pos in 1..12
    $degree = (270 + 30 * $pos)
    &__clock-pos-{$pos}.fmt24
      top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
      left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
  for $pos in 13..23
    $degree = (270 + 30 * $pos)
    &__clock-pos-{$pos}.fmt24
      top round(15% + ((1 + sin($degree * 1deg)) * 70%) / 2, 2)
      left round(15% + ((1 + cos($degree * 1deg)) * 70%) / 2, 2) /* rtl:ignore */
  &__clock-pos-0.fmt24
    top round(15% + ((1 + sin(270deg)) * 70%) / 2, 2)
    left round(15% + ((1 + cos(270deg)) * 70%) / 2, 2) /* rtl:ignore */

  &__now-button
    background-color $primary
    background-color var(--q-color-primary)
    color white
    top 12px
    right 12px

  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 10px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)

  &.disabled, &--readonly
    .q-time__header-ampm, .q-time__content
      pointer-events none

  &--portrait
    display inline-flex
    flex-direction column
    width 290px
    min-width 180px

    .q-time__header
      border-top-right-radius inherit
      min-height 86px

    .q-time__header-ampm
      margin-left 12px

  &--landscape
    display inline-flex
    align-items stretch
    width 420px
    min-width 310px
    min-height 180px

    > div
      display flex
      flex-direction column
      justify-content center

    .q-time__header
      border-bottom-left-radius inherit
      width 110px

    .q-time__header-ampm
      margin-top 12px

  &--dark
    color white
    background $grey-9