chip-set.scss

@use '../../style/functions';
@use '../../style/internal/shared_input-select-picker';
@use '../../style/mixins';

@use '../../style/internal/lime-theme';

@use '@material/textfield';
@use '@material/textfield/icon';

/**
 * @prop --icon-background-color: Background color of the icon. Defaults to transparent.
 * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.
 * @prop --background-color: Background color of the field when type is set to input.
 * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.
 * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.
 */

@include textfield.core-styles;
@include icon.icon-core-styles;

@include shared_input-select-picker.leading-icon;

$height-of-chip-set-input: functions.pxToRem(36);
$leading-icon-space: 1.5rem;

:host(limel-chip-set) {
    isolation: isolate;
}

:host(limel-chip-set[type='input']) {
    limel-notched-outline {
        [slot='content'] {
            min-height: shared_input-select-picker.$height-of-mdc-text-field;
        }
    }
}

:host(limel-chip-set:not([type='input'])) {
    .limel-notched-outline {
        --limel-notched-outline-border-color: transparent;
        --limel-notched-outline-background-color: transparent;
    }
}

.mdc-chip-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: shared_input-select-picker.$height-of-mdc-text-field;
    position: relative;

    &.mdc-chip-set--input {
        padding: 0.4rem 0.5rem;
        width: 100%;
    }

    &.has-clear-all-button {
        &.mdc-chip-set--input {
            padding-right: functions.pxToRem(
                32
            ); // This leaves space for "clear all" button and avoids overlapping with chips
        }
    }
}

.mdc-text-field {
    height: auto;
    cursor: text;
    flex-wrap: wrap;
    row-gap: 0.5rem;

    .mdc-text-field__input {
        @include shared_input-select-picker.input-field-placeholder;

        width: auto;
        padding: 0 0.5rem;

        flex-grow: 1;
        flex-shrink: 0;

        &.hidden {
            // This class is added, as soon as there is a chip selected and displayed
            // This input field should not be visually visible as it breaks the UI in some cases
            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia
            transition: all 0s;
            opacity: 0;
            position: absolute;
            z-index: -100; // to let users interact with chips, in case they're covered
        }
        &[type='search'] {
            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search
            background-color: transparent; // overides styles caused by previous line

            &::-webkit-search-cancel-button {
                display: none; // removes the default X button
            }
        }
    }
}

.clear-all-button {
    @include mixins.clear-all-button;
    @include mixins.visualize-keyboard-focus;

    position: absolute;
    right: 0.5rem;
    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);

    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).

    &:focus,
    .has-chips:not(.disabled):hover &,
    .has-chips:not(.disabled).mdc-text-field--focused & {
        opacity: 1;
        outline: none;
    }

    .mdc-chip-set:not(.has-chips) &,
    .has-chips.disabled & {
        display: none; // Won't receive focus when disabled
    }
}

.has-leading-icon {
    &:not(.has-chips) {
        .mdc-text-field__input {
            padding-left: $leading-icon-space;
        }
    }

    limel-chip {
        &:first-of-type {
            margin-left: 1.5rem;
        }
    }

    .search-icon {
        transition: transform 0.2s ease;
        position: absolute;
        top: functions.pxToRem(9);
        left: 0.25rem;
    }

    limel-icon {
        background-color: transparent;
    }
}

.delimiter {
    opacity: 0.5;
    padding: 0 functions.pxToRem(2);
    color: var(--mdc-theme-on-surface);
}

limel-chip {
    border-radius: 2rem;

    &.can-be-removed {
        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted
        box-shadow: var(--shadow-depth-8-error);
    }
}

@import './partial-styles/_readonly';
@import './partial-styles/_helper-text';