/*------------------------------------*\
    SEARCH BOX
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

// modifiable vars
$site-search__height: 3rem !default;
$site-search__height--medium: 3rem !default;
$site-search__background-colour: settings.$ds_colour__background--secondary !default;
$site-search__border-colour: settings.$ds_colour__grey !default;




.ds_site-search {
    box-sizing: border-box;
    color: settings.$ds_colour__text;
    min-height: $site-search__height;

    &__input[type=text],
    &__input[type=search] {
        background: $site-search__background-colour;
        border-color: $site-search__border-colour;
        margin-bottom: 0;
        min-height: $site-search__height;

        &:focus {
            border-color: currentColor;
        }
    }

    &--large {
        margin-bottom: $site-search__height;
    }
}

@include helpers.ds_media-query(medium) {
    .ds_site-search {
        min-height: $site-search__height--medium;

        &__button {
            height: $site-search__height--medium;
            width: $site-search__height--medium;
        }
    }
}