header {
    width: 100%;

    position: absolute;

    z-index: 1;
}

/* Desktop */

.header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: var(--space-xxl) var(--space-xxxl);

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

.header__group {
    display: flex;
    align-items: center;
    gap: var(--space-l);
}

.header__logo-wrapper {
    /* height: 54px; */
    height: 40px;
}

.header__logo {
    height: 100%;
}

.header__main .header__link {
    color: var(--color-03);
}

/* Mobile */

.header__hr {
    width: 100%;
    height: 1px;

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

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 100%;

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

.header__logo-wrapper--mobile {
    display: none;
}

.header__mobile-open-btn {
    width: 54px;
    height: 54px;
    
    border: 1px solid var(--color-03);

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);

    transform: skewX(var(--skew-negative-degree-m));
    -webkit-transform: skewX(var(--skew-negative-degree-m));
    transform-origin: top right;
    -webkit-transform-origin: top right;

    cursor: pointer;
}

.header__mobile-open-btn > div {
    width: 24px;
    height: 1px;

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

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

.header__mobile {
    width: 100%;
    height: calc(100vh - 126px);

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

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: calc(100% + 1px);

    z-index: 1;

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

.header__mobile-body {
    width: 100%;
    height: max-content;
    
    background-color: var(--color-03);

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    
    padding: var(--space-xxl) var(--space-xxxl);
}

.header__mobile-body > a {
    width: max-content;
}

.header__custom-ros-el {
    opacity: 0;

    transform: translateX(-80px);
    -webkit-transform: translateX(-80px);

    transition-property: opacity, transform;
    -webkit-transition-property: opacity, transform;
    transition-duration: var(--transition-02), var(--transition-02);
    -webkit-transition-duration: var(--transition-02), var(--transition-02);
    transition-timing-function: ease-out, ease-out;
    -webkit-transition-timing-function: ease-out, ease-out;
}

.header__custom-ros-el._animated {
    opacity: 1;

    transform: translateX(0);
    -webkit-transform: translateX(0);
}

.header__mobile-body > .header__custom-ros-el > .c-btn {
    transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

@media (max-width: 1024px) {
    /* Main */

    header._active .header__main {
        background-color: var(--color-03);
    }

    .header__logo-wrapper--main {
        display: none;
    }

    .header__group {
        display: none;
    }

    /* Mobile */

    .header__logo-wrapper--mobile {
        display: flex;
    }

    .header__mobile-open-btn {
        display: flex;
    }

    header._active .header__mobile-open-btn {
        border-color: var(--color-05);
    }

    header._active .header__mobile-open-btn > div {
        background-color: var(--color-07);
    }

    header._active .header__mobile-open-btn > div:nth-child(1) {
        /* transform: translateY(3px) rotate(135deg);
        -webkit-transform: translateY(3px) rotate(135deg); */

        transform: translateY(3px) skewX(var(--skew-positive-degree-m)) rotate(135deg);
        -webkit-transform: translateY(3px) skewX(var(--skew-positive-degree-m)) rotate(135deg);
    }

    header._active .header__mobile-open-btn > div:nth-child(2) {
        display: none;
    }

    header._active .header__mobile-open-btn > div:nth-child(3) {
        /* transform: translateY(-3px) rotate(45deg);
        -webkit-transform: translateY(-3px) rotate(45deg); */

        transform: translateY(-2px) skewX(var(--skew-positive-degree-m)) rotate(45deg);
        -webkit-transform: translateY(-2px) skewX(var(--skew-positive-degree-m)) rotate(45deg);
    }

    header._active > .header__hr {
        opacity: 1;

        visibility: visible;
    }

    header._active > .header__mobile {
        opacity: 1;

        visibility: visible;
    }
}

@media (max-width: 480px) {
    .header__logo-wrapper {
        height: 32px;
    }
}