/* Copyright (C) 2016 NooBaa */

dropdown {
    display: inline-block;
    width: 274px;

    hr {
        margin: 2px auto;
    }

    .dd-wrapper {
        position: relative;
    }

    .dd-summary {
        display: block;
        padding-right: 32px;
        width: 100%;

        &::before {
            content: attr(data-placeholder);
        }
    }

    &.disabled .dd-summary {
        &, &:focus {
            border-color: rgb(var(--color09));
            color: rgb(var(--color09));
        }
    }

    &.invalid .dd-summary:not(.disabled) {
        &, &:focus {
            border-color: rgb(var(--color31));
        }
    }

    &.warned .dd-summary:not(.disabled) {
        &, &:focus {
            border-color: rgb(var(--color26));
        }
    }

    .dd-chevron {
        position: absolute;
        top: 12px;
        right: 12px;
        pointer-events: none;
        fill: rgb(var(--color11));
    }

    .dd-collapse-wrapper {
        top: auto;
        bottom: auto;
        z-index: 3;
    }

    .dd-list {
        display: block;
        background-color: rgb(var(--color02));
        margin-top: 2px;
        overflow-y: auto;
        padding: 2px 0;
    }

    .dd-filter > input {
        border: none;
        width: auto;
        color: rgb(var(--color16));
    }

    .dd-options {
        min-height: 24px;
        max-height: 164px;
        overflow-y: auto;

        &::-webkit-scrollbar-thumb  {
            border-color: rgb(var(--color02));
        }
    }

    .dd-option,
    .dd-action {
        @focus-color: rgba(var(--color20), .3);

        color: rgb(var(--color16));
        font-size: @font-size3;
        cursor: pointer;
        padding: @gutter/2;
        border: 1px solid transparent;
        background: none;

        &:disabled, &.disabled {
            cursor: default;
            opacity: .4;
        }

        &:focus {
            display: relative;
            z-index: 1;
            border-color: @focus-color;
            box-shadow:
                0 0 2px @focus-color,
                inset 0 0 2px @focus-color;
        }

        &:hover {
            background-color: rgb(var(--color04));
            border-color: rgb(var(--color04));

            &.disabled {
                background-color: transparent;
                border-color: rgb(var(--color10));
            }

            &:focus {
                border-color: @focus-color;
            }
        }
    }

    .dd-action {
        width: 100%;
    }

    .dd-option {
        svg-icon:not(.warning):not(.error):not(.success):not(.info) {
            fill: rgb(var(--color12));
        }

        .dd-checkbox {
            @size: 18px;
            display: block;
            width: @size;
            height: @size;

             > .outer-rect {
                height: @size;
                width: @size;
                stroke: rgb(var(--color16));;
                fill: none;
            }

            > .inner-path {
                stroke-linecap: round;
                stroke-width: 2;
                stroke: rgb(var(--color20));
                fill: none;
                d: path('M4 10 l3 3 l7 -8');
                stroke-dasharray: 16;
                stroke-dashoffset: 16;
            }
        }

        &.selected {
            svg-icon {
                fill: rgb(var(--color20));
            }

            .dd-checkbox > .inner-path {
                stroke-dashoffset: 0;
                transition: stroke-dashoffset 150ms linear;
            }

            .dd-option-label {
                color: rgb(var(--color20));
            }
        }

        &.partial .dd-checkbox > .inner-path {
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 250ms linear;
            d: path('M4 9 l3 0 l7 0');
        }

        .dd-option-label {
            display: block;
            margin: 0;
            font-weight: @font-regular;
            line-height: 1.2;

            > .remark {
                color: inherit;
            }
        }
    }

    .dd-select-all {
        margin-bottom: 2px;
    }

    .dd-hidden,
    .dd-empty {
        text-align: center;
        position: relative;
        font-size: @font-size1;
        color: rgb(var(--color11));
        line-height: 3em;

        &.error {
            .error();
        }
    }

    loading-indicator .circle {
        background-color: rgb(var(--color13));
        border-color: rgb(var(--color13));
    }
}
