$width-transition: width 0.6s ease-out;
$color-transition:
    color 0.2s linear,
    background-color 0.2s linear;
$opacity-transition: opacity 0.2s linear;
$small-width: 42px;

.SearchInput {
    @include text-body;

    display: flex;
    align-items: center;
    border: 1px solid;
    height: 32px;
    border-color: var(--fields-stroke-default);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0;
    overflow: hidden;
    transition: $width-transition, $color-transition;
    gap: 4px;
    text-transform: unset;
    letter-spacing: unset;
    width: var(--segmented-input-active-width);

    &:hover {
        border-color: var(--fields-stroke-hover);
    }

    &:focus-within {
        border-color: var(--fields-stroke-focused);
    }

    &.applied {
        background-color: var(--fields-fill-applied);
    }

    .SearchGlyphIcon {
        min-width: 16px;
    }

    &-input {
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0;
        width: 100%;

        &::placeholder {
            transition: $opacity-transition;
            opacity: 0;
        }
    }

    &:focus-within,
    &:hover,
    &.fixed-size {
        .SearchInput-input {
            &::placeholder {
                opacity: 1;
            }
        }
    }

    &:has(.SearchInput-input:disabled) {
        background-color: var(--fields-fill-disabled);
        border-color: var(--fields-stroke-disabled);
        pointer-events: none;
    }

    &:not(:focus-within):not(:hover):not(.applied):not(.fixed-size) {
        width: $small-width;
    }

    &-clear.btn {
        display: none;

        .SearchInput.applied & {
            display: block;
        }
    }

    .hidden-placeholder {
        visibility: hidden;
        height: 0;
        position: absolute;
    }
}