.umb-mini-search {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
        position: absolute;
        left: 9px;
        width: 1em;
        height: 1em;
        pointer-events: none;
        color: @ui-action-discreet-type;
        transition: color .1s linear;
    }

    input {
        width: 0;
        padding-left: 24px;
        margin-bottom: 0;
        background-color: transparent;
        border-color: @ui-action-discreet-border;
        transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
        cursor: pointer;
    }

    &:focus-within, &:hover {
        .icon {
            color: @ui-action-discreet-type-hover;
        }

        input {
            color: @ui-action-discreet-border-hover;
            border-color: @ui-action-discreet-border-hover;
        }
    }

    input:focus, &:focus-within input {
        background-color: white;
        color: @ui-action-discreet-border-hover;
        border-color: @ui-action-discreet-border-hover;
        cursor: unset;
    }
    
    input:focus, &:focus-within input, &.--has-value input {
        width: 190px;
        padding-left:30px;
    }
}
