@use "../abstracts/mixins.scss" as *;

.search {
    display: flex;
    height: calc(var(--unit)*1.5);
    flex-grow: 2;
    flex-direction: row-reverse;
    align-items: center;
    gap: calc(var(--padding-inner)*0.5);

    svg {
        @include icon(18px);
        stroke-width: 1px;
        stroke: var(--color-txt);
    }



    .search__input-group {
        display: grid;
        grid-template-columns: var(--unit) 1fr;
        width: 100%;
        height: calc(var(--unit)*1.5);


        input {
            grid-column: 1/end;
            grid-row: 1;
            padding-left: calc(var(--padding-inner)*2.5);
            font-family: sans-serif;
            font-family: var(--font);
            font-size: var(--fs-normal);
            font-weight: 500;
            border-radius: var(--radius-small);
            border: 1px solid var(--color-txt-light);
            outline: none;

            &::placeholder {
                font-family: var(--font);
                font-size: var(--fs-normal);
            }

            &:focus {
                outline: 1px solid var(--color-violet);
            }

        }

        button {
            grid-column: 1;
            grid-row: 1;
            z-index: 10;
            align-self: center;
            position: relative;
            left: 10px;
            top: 2px;

        }
    }

    .search__icon {
        width: calc(var(--unit)*1.25);
        height: calc(var(--unit)*1.25);
        // background-color: red;
        border-radius: var(--radius-btn);
        border: 1px solid var(--color-txt);
        // background-color: var(--color-x-light);
        cursor: pointer;

        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
 
        &:hover {
            background-color: var(--color-x-light);
        }
    }

}


#search-toggle {
    display: none;
}


#search-toggle~[for="search-toggle"] .search__icon--open {
    display: flex;
}

#search-toggle~[for="search-toggle"] .search__icon--close {
    display: none;
}

#search-toggle~.search__input-group {
    display: none;
}

#search-toggle:checked~[for="search-toggle"] .search__icon--open {
    display: none;
}

#search-toggle:checked~[for="search-toggle"] .search__icon--close {
    display: flex;
}

#search-toggle:checked~.search__input-group {
    display: grid;
}