header {
    width: 100%;

    border-bottom: 1px solid var(--color-05);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--space-xl) var(--space-xxxl);
}

/* Desktop */

.header--desktop {
    width: 100%;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);

    position: relative;
}

.header__logo-outer-wrapper {
    width: 202px;

    display: flex;
    justify-content: flex-start;
}

.header__logo-inner-wrapper {
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.header__logo {
    height: 100%;
}

.header__links--desktop {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.header__link--desktop {
    white-space: nowrap;
}

/* Mobile */

.header--mobile {
    width: 100%;
    
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);

    position: relative;
}

.header__toggle-btn {
    height: 48px;

    display: flex;
    align-items: center;
}

.header__toggle-btn-label-wrapper {
    height: 100%;

    border-radius: var(--radius-l);

    background-color: var(--color-05);

    white-space: nowrap;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 var(--space-m);
}

.header__toggle-btn-icon-wrapper {
    width: 48px;
    height: 100%;

	border-radius: var(--radius-l);
    
    background-color: var(--color-01);

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.header__toggle-btn-icon {
    width: 18px;
    height: 18px;

    object-fit: contain;
    object-position: center;

    position: absolute;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);

    user-select: none;

    -webkit-user-drag: none;
}

.header__toggle-btn._active > .header__toggle-btn-icon-wrapper > .header__toggle-btn-icon--primary {
    opacity: 0;
}

.header__toggle-btn-icon--secondary {
    opacity: 0;
}

.header__toggle-btn._active > .header__toggle-btn-icon-wrapper > .header__toggle-btn-icon--secondary {
    opacity: 1;
}

.header__links-wrapper--mobile {
    width: 100%;
    height: calc(100% - 2 * var(--space-xxxl) - 48px + 1px);

	background-color: rgba(0, 0, 0, 0.8);

    opacity: 0;

    display: flex;
    align-items: flex-start;

    position: fixed;

    top: calc(2 * var(--space-xxxl) + 48px + 1px);
    left: 0;

    z-index: 1;

    pointer-events: none;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.header__links-wrapper--mobile._visible {
    opacity: 1;

    pointer-events: initial;
}

.header__links--mobile {
    width: 100%;

	background-color: var(--color-04);

    display: none;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-m);
}

.header__links--mobile > li {
    width: max-content;
}

@media (max-width: 1024px) {
    .header__logo-outer-wrapper {
        width: auto;
    }

    .header--desktop {
        display: none;
    }

    .header--mobile {
        display: flex;
    }
}

@media (max-width: 768px) {
    
}

@media (max-width: 480px) {
    .header__toggle-btn-label-wrapper {
        display: none;
    }
}