@import '../default/var';

.#{$prefix} {
    &-time {
        &-picker {
            display: inline-block;
            position: relative;
            width: 100%;
            &__panel {
                position: absolute;
                min-height: 160px;
                margin-top: 5px;
                border-radius: 4px;
                z-index: 9999;
                overflow: hidden;
                box-shadow: 0 2px 14px 0 rgba(50, 60, 71, 0.15);
                transition: height .3s, transform .3s, opacity .3s;
                background: $timepicker-color-back;
                text-align: center;
                &__tables {
                    overflow: hidden;
                    padding: 0 12px;
                    &__start,
                    &__end {
                        float: left;
                        margin: 0 8px;
                        .header {
                            height: 50px;
                            line-height: 50px;
                            font-size: 14px;
                            color: $timepicker-color-header-fore;
                        }
                    }
                    .#{$prefix}-time-table {
                        width: 140px;
                        border: 1px solid $timepicker-color-border;
                        border-radius: 1px;
                        &:before,
                        &:after {
                            width: 120px;
                            left: 10px;
                        }
                        &__hour,
                        &__minute,
                        &__second {
                            margin: 0;
                        }
                    }
                }
                &__actions {
                    height: 34px;
                    line-height: 34px;
                    text-align: right;
                    margin-top: 16px;
                    border-top: solid 1px $timepicker-color-border;
                    .ok,
                    .cancel {
                        margin-right: 20px;
                        cursor: pointer;
                    }
                    .ok {
                        color: $timepicker-color-active;
                    }
                }
            }
            .#{$prefix}-input__range {
                .#{$prefix}-input__origin {
                    text-align: center;
                }
            }
        }
        &-table {
            width: 200px;
            height: 160px;
            position: relative;
            background: $timepicker-color-back;
            &:before,
            &:after {
                content: "";
                display: block;
                position: absolute;
                width: 160px;
                left: 20px;
                height: 1px;
                background: $timepicker-color-border;
            }
            &:before {
                top: 64px;
            }
            &:after {
                top: 96px;
            }
            &__hour,
            &__minute,
            &__second {
                display: inline-block;
                width: 40px;
                margin: 0 10px;
                text-align: center;
                overflow-y: auto;
                height: 160px;
                ul {
                    padding: 64px 0;
                }
                &-item {
                    height: 32px;
                    line-height: 32px;
                    cursor: pointer;
                    user-select: none;
                    &--selected {
                        color: $timepicker-color-active;
                    }
                    &.is-disabled {
                        color: $timepicker-color-disabled;
                        cursor: not-allowed;
                    }
                }
                &::-webkit-scrollbar {
                    width: auto;
                    &-track {
                        background: transparent;
                    }
                }
            }
        }
    }
}