/*  COMPONENT: SEARCHFORM
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--searchform {
    }
    .searchform {
    }
    .search-form {
        display: grid;
        grid-template-columns: 1fr min-content;
    }
    .search-form > label {
        grid-column: 1 / -1;
        grid-row: 1;
        cursor: text;
    }
    .search-form .search-field {
        padding: 0;
        border: none;
        outline: none;
        height: 100%;
        background: transparent;
        padding-inline: var(--spacing-s);
        font-weight: bold;
    }
    .section--header .search-form:hover {
        background-color: #fff;
    }
    .search-form .search-field::placeholder {
        opacity: 0;
    }
    .search-form .search-field:hover::placeholder,
    .search-form .search-field:focus::placeholder {
        opacity: 1;
    }
    .section--header .search-form .search-field:focus {
        background-color: #fff;
    }
    .search-form .search-submit {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        border: none;
        outline: none;
        font-size: 0;
        width: 2.5rem;
        height: 2.5rem;
        background-image: url("../../images/icons/icon--search.svg");
        background-repeat: none;
        background-size: 2.5rem;
    }
    .section--main .search-form {
        outline: 2px solid;
    }
    .section--footer .search-form {
        border-radius: 2rem;
        overflow: hidden;
    }
    .section--footer .search-field,
    .section--footer .search-submit {
        background-color: var(--color-green-700);
        color: var(--color-green-100);
        padding-inline: var(--spacing-m);
    }
    .section--footer .search-submit {
        width: 2.5rem;
        padding: 0;
    }
    .section--footer .search-field::placeholder {
        color: var(--color-green-300);
    }
}