@require "nib"
@require "melon/css/theme/default/Button.variable.styl"
@require "melon/css/base.styl"
@require "melon/css/Button.styl"
@require "melon/css/Icon.styl"
@require "melon/css/Mask.styl"
@require "melon/css/Dialog.styl"


.{$-melon-class-prefix}-time-picker

    font-size: $-melon-medium-font-size
    display: inline-block
    position: relative
    margin-right: 1.2em

    &.state-invalid
        border-bottom-color: $-melon-colors.red500

    &.state-disabled &-label
        cursor: not-allowed
        color: $-melon-colors.grey400

    &-label
        display inline-block
        font-size: 1em
        width: 100%
        line-height: 1.5em
        border-bottom: 1px solid $-melon-colors.grey300
        transition: border-color 1s
        cursor: pointer
        vertical-align: middle

        > .{$-melon-class-prefix}-icon
            display: inline-block
            font-size: 1.2em
            width: @font-size
            vertical-align middle
            margin-right: -@width

        &-placeholder
            color: $-melon-colors.grey500
            font-size: 1em

    &-panel
        width: (280 / $-melon-medium-font-size)em

    &-header
        padding: (22 / $-melon-medium-font-size)em 0
        text-align: center
        background-color: $-melon-colors.cyan500
        color: $-melon-colors.white
        position: relative
        user-select: none

        &-time
            display: inline-block
            font-size: (58 / $-melon-medium-font-size)em
            line-height: 1
            font-weight: 200

            &-hour,
            &-minute
                opacity: 0.7
                cursor: pointer
                &.state-selected
                    opacity: 1
        &-apm
            position: absolute
            right: (20 / $-melon-medium-font-size)em
            bottom: (20 / $-melon-medium-font-size)em
            font-size: (17 / $-melon-medium-font-size)em
            font-weight: 200

            span
                opacity: 0.7
                cursor: pointer
                display: block
                line-height: (21 / $-melon-medium-font-size)em
                &.state-selected
                    opacity: 1

    &-clock
        &-main
            margin: (15 / $-melon-medium-font-size)em auto
            size((260 / $-melon-medium-font-size)em)
            border-radius: 1000em
            background-color: $-melon-colors.faintBlack
            position: relative
            user-select: none

    &-clock-item
        display: inline-block
        size(2em)
        line-height: 2
        user-select: none
        color: $-melon-colors.lightBlack
        font-size: 1.1em
        border-radius: 100em
        transform-origin: 50% 50%
        position: absolute
        left: 50%
        top: 50%
        margin-top: -1em
        margin-left: -1em
        text-align: center
        font-weight: 200
        cursor: pointer

        &.state-selected
            background-color: $-melon-colors.cyan500
            color: $-melon-colors.white

        &.state-disabled
            color: $-melon-colors.white
            cursor: not-allowed
            color: $-melon-colors.grey400

    &-clock-hand
        display: inline-block
        size(2px, 6em)
        transform-origin: 50% 0
        position: absolute
        top: (130 / $-melon-medium-font-size)em
        left: 50%
        background-color: $-melon-colors.cyan500

        &-end
            display: none
            height: 6.5em

        &.variant-end
            position: relative
            .{$-melon-class-prefix}-time-picker-clock-hand-end
                display: inline-block
                size: (6 / $-melon-medium-font-size)em
                border-radius: 100em
                border: 2px solid $-melon-colors.cyan500
                position: absolute
                bottom: -(9 / $-melon-medium-font-size)em
                left: -(3 / $-melon-medium-font-size)em

.{$-melon-class-prefix}-dialog.variant-timepicker
    .{$-melon-class-prefix}-dialog-window,
    .{$-melon-class-prefix}-dialog-body
        padding: 0
        border-radius: 0
    .{$-melon-class-prefix}-dialog-actions
        padding: 0.5em
        margin: 0