@layer base, layout, components, utilities;

@import 'base/bases.css' layer(base);

@import 'layout/layouts.css' layer(layout);

@import 'components/components.css' layer(components);

@import 'utilities/utilities.css' layer(utilities);

#logout-form {
    grid-area: logout;
    justify-self: end;
    align-self: center;
    margin: 0;
    padding: 0;

    button {
        height: calc(var(--icon-dimensions) + var(--padding-sm));
        min-width: calc(var(--icon-dimensions) + var(--padding-sm));
        padding: 0;
        margin: 0;

        svg {
            align-self: center;
            justify-self: center;
            width: var(--icon-dimensions);
            height: var(--icon-dimensions);
        }
    }

    @media (min-width: 768px) {
        align-self: end;
        padding-left: var(--spacing-med); /* Mimics grid gap for header */
    }
}