/* (c) Copyright Frontify Ltd., all rights reserved. */

@import '../../../utilities/sizeToken.module.scss';
@import '../../../utilities/focusStyle.module.scss';
@import '../../../utilities/transitions.module.scss';
@import '../../../utilities/mediaQuery.module.scss';

.root {
    @include focus-outline;
    @include transition-colors;

    & {
        position: relative;
        display: flex;
        align-items: stretch;
        text-align: start;

        font-family: var(--body-family-stack);
        font-weight: 400;
        font-size: var(--body-size-medium);

        min-width: 0;
        width: 100%;
        line-height: var(--body-size-medium-line-height);
        height: sizeToken(9);
        box-sizing: border-box;

        color: var(--text-color);
        background-color: var(--base-color);

        border-radius: var(--radius);
        border: var(--line-width) solid var(--line-color-strong);
        cursor: pointer;
    }

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

    &[data-show-focus-ring='false']:focus,
    &:has(input[data-show-focus-ring='false']:focus) {
        border-color: var(--line-color-xx-strong);
    }

    &: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;
    }

    &[data-status='success'] {
        border-color: var(--text-color-positive);
    }

    &[data-status='error'] {
        border-color: var(--text-color-negative);
    }

    &[data-empty='true'] {
        color: var(--text-color-x-weak);
    }

    &:has(input:placeholder-shown) {
        color: var(--text-color-x-weak);
    }
}

.selectedValue {
    width: 100%;
    background-color: transparent;
    text-indent: sizeToken(3);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: auto;
    margin-bottom: auto;
}

.input {
    width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    text-align: inherit;
    text-indent: sizeToken(3);
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-radius: calc(var(--radius) - var(--line-width));
    white-space: nowrap;
    line-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input,
.selectedValue {
    &::placeholder {
        color: var(--text-color-x-weak);
    }

    // Remove border-radius and text-indent/padding on the left if there’s a left-side slot
    &:has(~ div[data-name='left']) {
        text-indent: 0px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    // Remove border-radius and padding on the right if there’s a right-side slot
    &:has(~ .slot[data-side='right'], ~ .slot:not([data-side='right'])) {
        padding-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &:disabled {
        color: var(--text-color-disabled);
    }
    &:disabled ~ .slot {
        color: var(--text-color-disabled);
    }
}

.slot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    cursor: text;
    gap: sizeToken(1.5);
    padding-left: sizeToken(3);
    padding-right: sizeToken(2);
    color: var(--text-color);

    // Left slot
    &[data-name='left'] {
        order: -1;
        margin-left: 0px;
        margin-right: 0px;
    }

    // Right slot
    &[data-name='right'] {
        order: 0;
        margin-left: 0px;
        margin-right: 0px;
        padding-right: sizeToken(3);

        &:has(~ div[data-name='clear']) {
            padding-right: 0;
        }
    }

    // Label slot
    &[data-name='label'] {
        display: flex;
        align-items: center;
        cursor: text;
        height: 100%;
        padding-left: sizeToken(3);
        padding-right: sizeToken(2);

        &:has(~ div[data-name='left']) {
            text-indent: 0px;
            padding-left: 0;
        }
    }
}

.clear {
    display: flex;
    height: 100%;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 0 sizeToken(3);
    color: var(--text-color-weak);

    &:hover {
        color: var(--text-color-weak-hover);
    }
}

.icons {
    display: flex;
    gap: sizeToken(1);
    padding: 0 sizeToken(1.5);
}

.caret {
    @include transition-transform;
    & {
        display: flex;
        height: 100%;
        width: sizeToken(4);
        align-items: center;
        justify-content: center;
        margin: 0 sizeToken(1);
        color: var(--text-color-weak);
    }

    &:hover {
        color: var(--text-color-weak-hover);
    }

    div[role='combobox'][aria-expanded='true'] &,
    button[aria-expanded='true'] & {
        transform: rotateX(180deg);
    }
}

.iconSuccess {
    height: 100%;
    margin: 0 sizeToken(1);
    color: var(--text-color-positive);
}

.iconError {
    height: 100%;
    margin: 0 sizeToken(1);
    color: var(--text-color-negative);
}

.menu {
    display: none;
    border-radius: var(--radius);
    margin-top: sizeToken(2);
    background-color: var(--base-color);
    border: var(--line-width) solid var(--line-color-x-strong);
    max-width: calc(100dvw - sizeToken(8));
    min-width: var(--radix-popover-trigger-width);
    overflow: auto;
    max-height: var(--radix-popover-content-available-height);
    padding: sizeToken(2) 0;

    &:has(li[role='option']) {
        display: block;
    }

    @include sm {
        max-width: 500px;
    }
}

.portal {
    z-index: 30;
}

.item {
    @include transition-colors;
    & {
        display: flex;
        justify-content: space-between;
        padding: sizeToken(3) sizeToken(5);
        cursor: pointer;
        text-align: start;
        font-size: var(--body-size-medium);
        line-height: var(--body-size-medium-line-height);
    }

    &[data-highlighted='true'] {
        background-color: var(--box-neutral-strong-color);
        color: var(--box-neutral-strong-inverse-color);
    }

    &[data-selected='true'] {
        .checkmarkIcon {
            display: block;
        }
    }

    .menu[data-has-interacted='false'] &[data-selected='true']:not(:hover),
    &[data-selected='true'][data-highlighted='false'] {
        background-color: var(--box-selected-color);
        color: var(--box-selected-inverse-color);
    }

    .itemValue {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.checkmarkIcon {
    width: sizeToken(4);
    height: sizeToken(4);
    display: none;
}

.group {
    .item ~ & {
        border-top: var(--line-width) solid var(--line-color-strong);
    }
    &:has(+ .item) {
        border-bottom: var(--line-width) solid var(--line-color-strong);
    }
}
