@use "../variables" as vars;
@use "../functions" as func;

.search {
    display: flex;

    .form-input {
        background-color: func.color(vars.$search-background-color);
        margin-top: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        &:focus {
            z-index: vars.$zindex-focus;
        }
    }

    .button-search {
        font-weight: func.font-weight('semibold');
        font-size: func.font-size('sm');
        min-height: auto;
        padding-left: func.units(4);
        padding-right: func.units(4);
        border-radius: func.border-radius('medium');
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border: func.border(vars.$input-border);
        border-left: 0;
        color: func.color(vars.$button-search-text-color);
        background-color: func.color(vars.$button-search-default-background-color);
        text-decoration: none;
        width: inherit; // Prevent width from increasing on mobiles

        &:hover {
            background-color: func.color(vars.$button-search-hover-background-color);
            text-decoration: underline;
        }

        &:focus {
            background-color: func.color(vars.$button-search-hover-background-color);
        }

        &:active {
            background-color: func.color(vars.$button-search-active-background-color);
        }
    }
}