@import '../../less/reset';
@import '../../less/styles';
@import '../../less/fonts';
@import '../../less/palette';
@import '../../less/palette-brand-@{theme}';

.date-picker {
    @button-height: 32px;
    @shortcut-button-width: 94px;
    @picker-width: 320px;
    @triangle-distance: 10px;
    @triangle-border-distance: 7px;

    display: inline-block;
    position: relative;

    height: @button-height;

    &.left {
        left: 0;

        .button.exit {
            float: left;
        }

        .shortcuts {
            float: right;
        }

        .custom {
            left: 0;

            &:after {
                left: @triangle-distance;
            }

            &:before {
                left: @triangle-border-distance;
            }
        }
    }

    &.right {
        right: 0;

        .button.exit {
            float: right;
        }

        .shortcuts {
            float: left;
        }

        .custom {
            right: 0;

            &:after {
                right: @triangle-distance;
            }

            &:before {
                right: @triangle-border-distance;
            }
        }
    }

    .button {
        > .content {
            padding: 1px 0 0;
        }
    }

    .current {
        &.sm {
            .button > .content {
                font-size: 12px;
            }
        }

        .button {
            height: @button-height;
            line-height: @button-height;
            position: relative;

            > .content {
                text-align: left;
                padding-left: 12px;
                padding-right: 36px;
            }

            &:after {
                content: '';
                position: absolute;
                right: 10px;
                top: 10px;
                width: 12px;
                height: 11px;
                z-index: 10;
                background-image: url('./img/calendar.svg');
            }
        }
    }

    /* pre-load image */
    &:after {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        content: url('./img/x.svg');
    }


    .controls {
        width: @picker-width;

        .button.exit {
            color: @color-secondary;
            display: inline-block;
            width: @button-height;
            height: @button-height;

            background-image: url('./img/x.svg');
            background-position: center;
            background-repeat: no-repeat;
        }

        .shortcuts {
            display: inline-block;

            > .button {
                .bold;
                font-size: 13px;
                color: @color-secondary;
                display: inline-block;
                border-radius: 0;
                height: @button-height;
                line-height: @button-height;
                width: @shortcut-button-width;

                &:hover {
                    position: relative;
                }

                &:first-of-type {
                    .border-left-radius(3px);
                }

                &:nth-of-type(n + 1) {
                    margin-left: -1px;
                }

                &:last-of-type {
                    .border-right-radius(3px);
                }
            }
        }
    }

    .custom {
        top: @button-height + 8;
        position: absolute;
        z-index: 40;
        width: @picker-width;

        /* ▲ http://apps.eky.hk/css-triangle-generator */
        &:before,
        &:after {
            content: '';
            position: absolute;
            top: -3px;
            z-index: -10;
            border-style: solid;
            border-width: 0 6px 6px;
            border-color: transparent transparent white;
        }

        /* ▲ border */
        &:before {
            border-width: 0 9px 10px;
            border-color: transparent transparent @color-border;
            top: -5px;
        }
    }
}
