@import "../../style/display.pcss";
@import "../../style/border.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/mixin/hover.pcss';

@import "../../style/control.pcss";
@import "../../style/floating-ui.pcss";

[data-monster-role=container] {
    appearance: none;
    min-height: 1.4em;
    flex: 4 0 90%;
    width: 100%;
    overflow: auto;

    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
    scrollbar-width: thin;

}

.d-none {
    display: none !important;
}

div[data-monster-role="control"] {
    height: 100%;
    position: relative;
    display: flex;
}

[data-monster-role=container].open {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
    background-color: var(--monster-bg-color-primary-2);
    mask-size: 0.8em;
    mask-repeat: no-repeat;
    mask-position: center center;

}

[data-monster-role=container].clear {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-color: var(--monster-bg-color-primary-2);
    mask-size: 0.8em;
    mask-repeat: no-repeat;
    mask-position: center center;

}

[data-monster-role=control] {

    font-family: inherit;
    font-size: 100%;
    padding: 0.4rem 0.6rem;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    accent-color: var(--monster-color-secondary-2);

    border-image: initial;

    border-width: var(--monster-theme-control-border-width);
    border-radius: var(--monster-theme-control-border-radius);
    border-style: var(--monster-theme-control-border-style);
    border-color: var(--monster-theme-control-border-color);

    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);

    display: flex;
    width: fill-available;

}

@media (prefers-color-scheme: light) {
    [data-monster-role=control] {
        background-color: var(--monster-bg-color-primary-1);
        color: var(--monster-color-primary-1);
        border-color: var(--monster-bg-color-primary-3);
    }

    [data-monster-role=control]:focus {
        outline: 1px dashed var(--monster-color-selection-4);
        outline-offset: 2px;
    }
}


[data-monster-role=control]:hover {
    @mixin box-hover ;
}

div[data-monster-role=selection] {
    display: flex;
    gap: 5px;
    margin: 5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

[data-monster-role=option-control] {
    margin-right: 8px;
}

[data-monster-role=badge] {
    display: inline-flex;
}

[data-monster-role=badge-label] {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
}

[data-monster-role=filter], [data-monster-role=popper-filter] {
    visibility: hidden;
    order: 99999999;
    display: flex;
    flex-grow: 200;
}

[data-monster-role=filter].active {
    visibility: visible;
    min-width: 40%;
    border: 0;
    outline: none;

    background-color: var(--monster-bg-color-primary-2);
    border-color: var(--monster-bg-color-primary-3);
    color: var(--monster-color-primary-2);

    border-bottom: 1px solid var(--monster-bg-color-primary-3);
    
    &[name="popper-filter"] {
        width: calc(100% - var(--monster-border-width) * 2);
        height: 1.5em;
        padding: 2px;
        margin: 2.5em;
    }
    
}

.option-filter-control {
    margin: calc(1.1em * -1) calc(1.1em * -1 ) 0.3em calc(1.1em * -1 );
    height: 2.5em;
    background-color: var(--monster-bg-color-primary-2);
    display: flex;
    align-items: center;
}


[data-monster-role=remove-badge] {
    width: 16px;
    min-height: 16px;
    order: 2;
    height: 16px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-color: var(--monster-bg-color-primary-2);
    mask-size: 0.8em;
    mask-repeat: no-repeat;
    mask-position: center center;
    margin-left: 5px;
}

[data-monster-role=status-or-remove-badges] {
    appearance: none;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-size: 0.8em;
    mask-repeat: no-repeat;
    mask-position: center center;
    background-color: var(--monster-bg-color-primary-4);

    width: 16px;
    min-height: 16px;
    
    &.closed {
        /** pseudo class; this is for setStatusOrRemoveBadges.call(this, "success") remove other states after loading */
    }
    
    &.open {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
        background-color: var(--monster-bg-color-primary-4);
    }

    &.empty {
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-dash-circle%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014zm0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%208a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7A.5.5%200%200%201%204%208z%22%2F%3E%0A%3C%2Fsvg%3E");
        background-color: var(--monster-bg-color-primary-4);
    }
    
    &.clear {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        background-color: var(--monster-bg-color-primary-4);
    }
    
    &.error {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E");
        background-color: var(--monster-bg-color-error-1);
    }
    
    &.loading {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");
        background-color: var(--monster-bg-color-primary-4);
        animation-name: activity;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes activity {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(0.1)
    }
    100% {
        transform: scale(1)
    }
}

[data-monster-role=options] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
    scrollbar-width: thin;    
    
}

[data-monster-role=option] {
    padding: 6px 5px;
    align-items: center;
    display: flex;
    box-sizing: border-box;
}

[data-monster-role=option] label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}


[data-monster-role=option] label > div {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: 100%;
    outline: none;
}

[data-monster-role="no-options"] {
    margin: 1.1em 0 0 1.1em;
    padding: 0.3em 0.8em;
    border-radius: 0.2em;
    color: var(--monster-color-warning-4);
    background-color: var(--monster-bg-color-warning-4);
}

.selected {
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
}

[data-monster-role=option][data-monster-visibility=hidden] {
    display: none;
}

[data-monster-role=option][data-monster-filtered=true] {
    display: none;
}

[data-monster-role=option][data-monster-focused=true] {
    outline: 1px dashed var(--monster-color-selection-2);
    outline-offset: -2px;
}

[data-monster-role=option] > label:focus,
[data-monster-role=option] > input:focus {
    outline: none
}