@import '_variables';

.ezmodus-select {

    position: relative;
    line-height: 1;

    > select {
        display: none;
    }

    &.open-menu {
        .ezmodus-menu {
            visibility: visible;
            ul {
                height: auto;
            }
        }
    }

    .ezmodus-dropdown {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        border: $ezmodus-dropdown-border;
        border-radius: $ezmodus-dropdown-border-radius;
        background-color: $ezmodus-dropdown-background-color;
        width: $ezmodus-dropdown-width;
        padding: $ezmodus-dropdown-padding;
        justify-content: space-between;
        cursor: pointer;

        .text {
            padding: $ezmodus-dropdown-text-padding;
            color: $ezmodus-dropdown-color;
            text-align: left;
            white-space: nowrap;
        }
        .tick {
            display: inline-block;
            background-image: url(tick($ezmodus-dropdown-tick-color));
            background-repeat: no-repeat;
            width: $ezmodus-dropdown-tick-width;
            height: $ezmodus-dropdown-tick-height;
            flex-shrink: 0;
            flex-grow: 0;
        }
        &.disabled {
            cursor: $ezmodus-dropdown-disabled-cursor;
            color: $ezmodus-dropdown-disabled-color;
            background-color: $ezmodus-dropdown-disabled-background-color;
            .tick {
                background-image: url(tick($ezmodus-dropdown-disabled-tick-color));
            }
        }
    }

    .ezmodus-menu {
        position: absolute;
        z-index: 5;
        visibility: hidden;
        background-color: $ezmodus-menu-background-color;
        border: $ezmodus-menu-border;
        border-radius: $ezmodus-menu-border-radius;
        min-width: $ezmodus-menu-min-width;
        max-width: $ezmodus-menu-max-width;
        transition: height .2s ease-in-out, visibility .2s ease-out;
        &.with-search {
            min-width: $ezmodus-menu-search-min-width;
            max-width: $ezmodus-menu-search-max-width;
        }

        .ezmodus-search {
            padding: $ezmodus-search-padding;
            input {
                padding: $ezmodus-search-input-padding;
                width: 100%;
                border: $ezmodus-search-input-border;
                border-radius: $ezmodus-search-input-border-radius;
                color: $ezmodus-search-input-color;
                background-color: $ezmodus-search-input-background-color;
                &:focus, &:focus-visible, &:focus-within {
                    outline-color: $ezmodus-search-input-focus-outline-color;
                }
                &::-webkit-input-placeholder {
                    color: $ezmodus-search-input-placeholder-color;
                }
            }
        }
        .ezmodus-clear {
            padding: $ezmodus-clear-padding;
            button {
                cursor: pointer;
                width: $ezmodus-clear-button-width;
                height: $ezmodus-clear-button-height;
                border: $ezmodus-clear-button-border;
                border-radius: $ezmodus-clear-button-border-radius;
                color: $ezmodus-clear-button-color;
                background-color: $ezmodus-clear-button-background-color;
            }
        }

        .no-results {
            display: none;
            padding: $ezmodus-no-results-padding;
        }

        ul {
            list-style-type: none;
            overflow-x: hidden;
            overflow-y: auto;
            margin: 6px 0 0 0;
            padding: 0;
            height: 0;
            li.group {
                padding: $ezmodus-list-group-padding;
                color: $ezmodus-list-group-color;
                background-color: $ezmodus-list-group-background-color;
                margin-left: $ezmodus-list-group-margin-left;
                &:hover {
                    background-color: $ezmodus-list-group-background-color-hover;
                }
                .item-wrapper {
                    display: flex;
                    align-items: flex-start;
                    .text {
                        font-weight: $ezmodus-list-group-font-weight;
                    }
                }
            }
            li.item {
                padding: $ezmodus-list-item-padding;
                color: $ezmodus-list-item-color;
                background-color: $ezmodus-list-item-background-color;
                cursor: pointer;
                &.group-item {
                    padding-left: $ezmodus-list-group-item-padding-left;
                }
                &:hover:not([data-disabled="true"]) {
                    background-color: $ezmodus-list-item-background-color-hover;
                }
                &.selected {
                    .item-wrapper {
                        .checkmark {
                            opacity: 1;
                        }
                    }
                }
                &[data-disabled="true"] {
                    cursor: initial;
                    color: $ezmodus-list-item-disabled-color;
                    background-color: $ezmodus-list-item-disabled-background-color;
                    a {
                        .subtext {
                            color: $ezmodus-list-item-disabled-color;
                        }
                    }
                }
                a {
                    display: flex;
                    flex-direction: column;
                    user-select: none;
                    width: 100%;
                    min-height: $ezmodus-list-item-link-min-height;
                    .item-wrapper {
                        display: flex;
                        align-items: flex-start;
                        .checkmark {
                            display: inline-block;
                            flex-shrink: 0;
                            opacity: 0;
                            margin-right: 6px;
                            background-image: url(checkmark($ezmodus-list-item-checkmark-color));
                            background-repeat: no-repeat;
                            width: $ezmodus-list-item-checkmark-width;
                            height: $ezmodus-list-item-checkmark-height;
                        }
                        .text {
                            padding: $ezmodus-list-item-link-text-padding;
                        }
                    }
                    .subtext {
                        color: $ezmodus-list-item-subtext-color;
                        // calculate from checkmark space how much indent
                        // is required for subtext
                        margin-left: 6px; // must be same with checkmark margin-right
                        padding: $ezmodus-list-item-subtext-padding;
                    }
                }
            }
        }
    }
}