@import "shared/mixins-and-vars";

.enable-combobox {
    &__inner-container {
        text-align: left;
        /* pc is positioning context */
        position: relative;
        width: 30em;
        max-width: 100%;
        font-size: (16/@px);
        font-family: sans-serif;

        @media @desktop {
            max-width: 400px;
        }
    }

    &__group {
        padding: 10px;
    }

    &__reset-button {
        position: absolute;
        z-index: 1;
        right: 5px;
        top: 0;
        bottom: 0;
        padding: 0;
        border: none;
        background: transparent;
        .vendor(appearance, none);

        .enable-combobox input[role="combobox"]:not(:valid) ~ & {
            display: none;
            border: solid 1px red;
        }
    }

    &__reset-button-image {
        display: inherit;
    }

    [hidden] {
        display: none !important;
    }

    input[role="combobox"] {
        position: relative;
        font-size: (12/@px);
        height: 1.5em;
        width: 100%; /* of pc */
        border: solid 1px #000;
        min-height: 1em;
        padding: 0.9em 0.5em;
        box-sizing: border-box;
        z-index: 1;

        .enable__is-dark-mode & {
            border-color: @dark-mode-white;
        }
    }

    [role="alert"] {
        position: absolute;
        top: 0.3em;
        right: 2em;
        font-size: 0.8em;
        color: #777;
        z-index: 2;
    }
    [role="listbox"] {
        position: absolute;
        margin: 0;
        padding: 0;
        list-style: none;
        top: 1.5em;
        left: 0;
        background-color: #fff;
        border: solid 1px #ccc;
        width: 100%;
        box-sizing: border-box;
        z-index: 2;
        max-height: 200px;
        overflow: auto;

        .enable__is-dark-mode & {
            background: @dark-mode-black;
        }
    }
    [role="option"] {
        display: block;
        margin: 0;
        padding: 0.3em 0.5em;
        list-style: none;
        font-size: (12/@px);
        cursor: pointer;
    }
    [role="option"]:hover {
        color: #000;
        background-color: #ccc;
    }

    [aria-selected="true"] {
        color: #fff;
        background-color: #666;
    }
}