/* (c) Copyright Frontify Ltd., all rights reserved. */
@import '../../../utilities/sizeToken.module.scss';
@import '../../../utilities/focusStyle.module.scss';
@import '../../../utilities/transitions.module.scss';

.root {
    @include transition-colors;

    width: 100%;
    position: relative;
    justify-content: start;
    align-items: center;
    gap: sizeToken(2);
    overflow: hidden;

    font-family: var(--body-family-stack);
    font-weight: 400;
    font-size: var(--body-size-medium);
    line-height: var(--body-size-medium-line-height);
    box-sizing: border-box;

    text-align: start;
    color: var(--text-color-x-weak);
    background-color: var(--base-color);
    border-radius: var(--radius);
    border: var(--line-width) solid var(--line-color-strong);

    &:hover {
        border-color: var(--line-color-x-strong);
        color: var(--text-color-weak);
    }

    &:has(:focus-visible),
    &[data-state='open'] {
        border-color: var(--line-color-xx-strong);
        color: var(--line-color-xx-strong);
    }

    &:has(button[data-color-input-select]:focus-visible) {
        @include focus-outline-styles
    }

    &:has(input:disabled),
    &[data-disabled='true'] {
        border-color: var(--line-color-weak);
        background-color: var(--box-disabled-color);
        color: var(--text-color-disabled);
        cursor: default;
    }
}

.button {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: sizeToken(2);
    flex-grow: 1;
    padding-left: sizeToken(3);
    padding-right: sizeToken(3);
    height: sizeToken(9);
    outline: none;
    width: 100%;
}

.colorIndicator {
    width: sizeToken(4);
    height: sizeToken(4);
    border-radius: sizeToken(1);
}

.actions {
    position: absolute;
    top: 0;
    bottom: 0;
    right: sizeToken(3);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.clear {
    outline: none;
    padding: sizeToken(1);
    margin: sizeToken(1);
    @include focus-outline;
    pointer-events: all;
}

.caret {
    @include transition-all;
}

[data-state='open'] {
    .caret {
        transform: rotate(180deg);
    }
}
