.header {
    position: fixed;
    width: 100%;
    z-index: 100;

    &.is-scrolled {
        .header__wrapper {
            box-shadow: rem(0px 6px 6px 0px) #59585840;
            
            &.is-active {
                box-shadow: none;
            }
        }

        .header__notice {
            transform: translateY(-100%);
        }
    }

    &__wrapper {
        z-index: 100;
        padding: rem(12px 0);
        background-color: $c-4;
        position: relative;
    
        @include sm {
            padding: rem(18px 0);
        }
    }

    &__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__logo {
        max-width: rem(240px);

        @include sm {
            max-width: rem(172px);
        }

        img {
            width: 100%;
            height: auto;
        }
    }

    &__navigation {
        @include sm {
            display: none;
        }
    }

    &__items {
        list-style-type: none;
        display: flex;
        column-gap: rem(8px);

        .menu-item {
            padding: rem(10px 20px);
            border-radius: rem(8px);
            transition: all .3s;

            a {
                color: $c-3;
                font-weight: $fw-medium;
                transition: all .3s;
            }

            @include hover {
                background-color: $c-5;
                cursor: pointer;

                a {
                    color: $c-1;
                }
            }
        }
    }

    &__side {
        display: flex;
        align-items: center;
        column-gap: rem(24px);
    }

    &__button {
        display: flex;

        @include sm {
            display: none;
        }

        .button {
            padding: rem(11px 23px);
        }
    }

    &__hamburger {
		display: none;
		width: rem(28px);
		height: rem(28px);
		margin-top: rem(5px);
		position: relative;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
		cursor: pointer;

		@include sm {
			display: block;
			order: 2;
		}

		span {
			display: block;
			position: absolute;
			height: rem(3px);
			width: 100%;
			background: $c-2;
			opacity: 1;
			left: 0;
			transform: rotate(0deg);
			transition: .25s ease-in-out;
		}

		span:nth-child(1) {
			top: rem(0px);
		}

		span:nth-child(2),
		span:nth-child(3) {
			top: rem(10px);
		}

		span:nth-child(4) {
			top: rem(20px);
		}

		&.is-active span:nth-child(1) {
			top: 10px;
			width: 0%;
			left: 50%;
		}

		&.is-active span:nth-child(2) {
			transform: rotate(45deg);
		}

		&.is-active span:nth-child(3) {
			transform: rotate(-45deg);
		}

		&.is-active span:nth-child(4) {
			top: 10px;
			width: 0%;
			left: 50%;
		}
	}

    &__notice {
        background-color: #E5EBF6;
        padding: rem(12px 0);
        transition: all .3s;
        position: relative;
        z-index: 99;

        p {
            text-align: center;
            font-weight: $fw-medium;
        }

        &.hide {
            opacity: 0;
            visibility: 0;
        }
    }

    &__mobile {
        display: none;

        @include sm {
            background-color: $c-4;
            position: fixed;
            width: 100%;
            height: auto;
            left: 0;
            top: 0;
            transform: translateY(-100%);
            z-index: 98;
            padding: rem(20px 16px);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            row-gap: rem(24px);
            transition: all .3s;
            box-shadow: rem(0px 6px 6px 0px) #59585840;
            border-top: rem(1px) solid $c-7;
        }

        &.is-active {
            transform: translateY(0);
        }

        .header__items {
            flex-direction: column;
            row-gap: rem(24px);

            .menu-item {
                padding: 0;
                text-align: right;

                a {
                    font-size: $fs-18;
                }
            }
        }

        &__button {
            @include sm {
                display: flex;
            }
        }
    }
}
