@use '../helpers/mixins';

header,
.header {
    background-color: var(--color-gray-200);
    box-shadow: var(--shadow-outer-4);
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
}

header nav,
.nav {
    display: flex;
    gap: var(--spacing-3);
}

header nav a,
.nav-item,
.logo {
    color: var(--color-black);
    text-decoration: none;
    background-color: var(--color-gray-200);
    box-shadow: var(--shadow-outer-4);
    position: relative;
    padding: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 160px;

    &:active,
    &.is-active {
        box-shadow: var(--shadow-inner-3);
        background-color: var(--color-white);
        @include mixins.checkered-bg;
    }
}

.logo {
    min-width: 0;
}