@import url('meta');
@import url('glue');
@import url('transition.less');

@__timeInputWidth: @min_component_width * 0.5;

.timeinput {
    position: relative;
    width: @__timeInputWidth;
    >._input {
        position: relative;
        input {
            width: 100%;
        }
        i:after {
            content: 'timer';
            .input_icon;
            color: @primaryColor;
        }
    }
}

@{NS}.timepicker {
    width: @__timeInputWidth;
}

@{NS}.timepicker, ._timepicker {
    position: relative;
    .timeinput {
        width: 100%;
    }
    /* position */
    &._top {
        >._wrap {
            top: initial;
            bottom: @padding * 4.5;
            >._section {
                &:before, &:after {
                    top: initial;
                    bottom: -14px;
                    border-color: @light_gray transparent transparent transparent;
                }
                &:after {
                    bottom: -12px;
                    border-color: @mini_gray transparent transparent transparent;
                }
            }
        }
    }

    ._wrap {
        display: block;
        position: absolute;
        left: 0;
        top: @padding * 4.5;
        width: @min_input_width;
        z-index: 100;
        background-color: @white;
    }
    ._section {
        .bordered;
        .box_shadow;
        .top_angle;
        overflow: hidden;
    }
    ._list {
        position: relative;
        width: 33.33%;
        float: left;
        max-height: 140px;
        margin: 0;
        z-index: 1;
        overflow-y: scroll;
        &+._list {
            border-left: 1px solid @light_gray;
        }
        > ul {
            padding: 0 0 120px 0;
            display: block;
        }
        ._item {
            text-align: center;
            cursor: pointer;
            padding: 2px 0;
            color: @dark_gray;
            font-size: 13px;
            line-height: 26px;
            &._active {
                color: @white;
                background-color: @primaryColor;
            }
        }
    }
    &._simple {
        ._list {
            width: 50%;
        }
    }
    
    .basic_transition;
}