search-form.module.css

.form {
    --border-radius: 5000px;
    --submit-icon-size: 1em;
    --submit-button-padding-left: var(--space-2xs);
    --submit-button-padding-right: var(--space-xs);
    --submit-button-width: calc(var(--submit-button-padding-left) + var(--submit-icon-size) + var(--submit-button-padding-right));
    --input-padding: var(--space-3xs);
    --input-padding-left: var(--space-xs);
    --input-padding-right: calc(var(--submit-button-width) + var(--input-padding));

    position: relative;
    font-size: calc(var(--space-s) * 0.9);

    &.size-big {
        --input-padding: 8px;
        --input-padding-left: 16px;
        --submit-button-padding-left: 12px;
        --submit-button-padding-right: 16px;

        font-size: var(--space-s);
    }
}

.input {
    --search-form-focus-shadow: 0 0 0 var(--space-3xs) var(--yellow500);

    border: none;
    color: light-dark(black, var(--main-color));
    background: light-dark(white, hsl(0, 1%, 19%));
    width: 100%;
    padding: var(--input-padding) var(--input-padding-right) var(--input-padding) var(--input-padding-left);
    border-radius: var(--border-radius);
    box-shadow: 1px 2px 4px 0 light-dark(var(--green900), hsl(111, 10%, 8%));
    transition: box-shadow var(--transition-fast);

    &:focus {
        outline: none;
        box-shadow: var(--search-form-focus-shadow),
            1px 2px 3px 4px var(--green900);
    }
}

.input-lg {
    composes: input;

    @media only screen and (max-width: 820px) {
        display: none;
    }
}

.input-sm {
    composes: input;
    display: none;

    @media only screen and (max-width: 820px) {
        display: unset;
    }
}

.submit-button {
    composes: button-reset from '../styles/shared/buttons.module.css';

    position: absolute;
    /* see https://github.com/rust-lang/crates.io/issues/8677 🤷 */
    right: -.5px;
    top: 0;
    bottom: 0;
    display: inline-grid;
    place-items: center;
    padding-left: var(--submit-button-padding-left);
    padding-right: var(--submit-button-padding-right);
    color: white;
    background-color: var(--yellow500);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    cursor: pointer;

    &:hover {
        background-color: var(--yellow700);
    }
}

.submit-label {
    composes: sr-only from '../styles/shared/a11y.module.css';
}

.submit-icon {
    width: var(--submit-icon-size);
    height: var(--submit-icon-size);
}