@import './ListBox.css';
@import './Popover.css';
@import './Button.css';
@import './Form.css';
@import "./theme.css";

.react-aria-Select {
    color: var(--text-color);
    margin-bottom: 16px;

    .react-aria-Button {
        border-radius: 6px;
        padding: 0 15px;
        display: flex !important;
        align-items: center;
        width: 100%;
        height: 40px;
        letter-spacing: normal;
        font-weight: 400;

        &[data-pressed] {
            outline: 2px solid var(--secondary-color);
            outline-offset: -1px;
        }
    }

    .react-aria-SelectValue {
        text-align: left;
        flex: 1;

        &[data-placeholder] {
            font-style: italic;
            color: var(--text-color-placeholder);
        }
    }

    span[aria-hidden] {
        width: 1.5rem;
        line-height: 1.375rem;
        margin-left: 1rem;
        padding: 1px;
        color: var(--primary-color);
        forced-color-adjust: none;
        font-size: 24px;
    }
}

.react-aria-Popover[data-trigger=Select],
.react-aria-Popover[data-trigger=ComboBox] {
    min-width: var(--trigger-width);

    .react-aria-ListBox {
        display: block;
        width: unset;
        max-height: inherit;
        min-height: unset;
        border: none;

        .react-aria-Header {
            padding-left: 1.571rem;
        }
    }

    .react-aria-ListBoxItem {
        padding: 0.286rem 0.571rem 0.286rem 1.571rem;

        &[data-focus-visible] {
            outline: none;
        }

        &[data-selected] {
            font-weight: 600;
            background: unset;
            color: var(--text-color);

            &::before {
                content: '✓';
                content: '✓' / '';
                alt: ' ';
                position: absolute;
                top: 4px;
                left: 4px;
            }
        }

        &[data-focused],
        &[data-pressed] {
            background: var(--highlight-background);
            color: var(--highlight-foreground);
        }
    }
}

.react-aria-ListBoxItem[href] {
    text-decoration: none;
    cursor: pointer;
}

.react-aria-Select {
    .react-aria-SelectValue {
        [slot=description] {
            display: none;
        }
    }

    .react-aria-Button {
        background-color: transparent;
        border: 1px solid var(--list-background);
        border-radius: 4px;
        color: var(--default-color);

        &[data-disabled] {
            border-color: var(--border-color-disabled);
            color: var(--text-color-disabled);

            span[aria-hidden] {
                background: var(--border-color-disabled);
                color: var(--text-color-disabled);
            }

            .react-aria-SelectValue {
                &[data-placeholder] {
                    color: var(--text-color-disabled);
                }
            }
        }
    }
}

@media (forced-colors: active) {
    .react-aria-Select {
        .react-aria-Button {
            &[data-disabled] span[aria-hidden] {
                background: 0 0;
            }
        }
    }
}

.react-aria-Select {
    .react-aria-FieldError {
        font-size: 12px;
        color: var(--invalid-color);
    }

    [slot=description] {
        font-size: 12px;
    }
}