@import '../../index.scss';

.menu-right {
    position: fixed;
    z-index: 4;
    width: 100dvw;
    height: 100vh;
    background-color: rgba(5, 5, 5, 0.8);
    display: flex;
    justify-content: end;

    &__container {
        width: 50vw;
        height: 100dvh;
        overflow: hidden;
        padding: 6rem 2rem;
        position: fixed;
        z-index: 5;
        right: 0;
        font-size: 1.5rem;

        &.dark {
            @include dark-theme;
        }

        &.light {
            @include light-theme;
        }


        h2 {
            text-transform: uppercase;
        }

        &--text {
            font-style: italic;
            margin-bottom: 2rem
        }

        form, input, label, textarea {
            width: 100%;  
        }
    }

    .dark {
        @include dark-theme;
      }
    
    .light {
        @include light-theme;
    }

    button {
        background-color: var(--grey800);
        border-radius: 30px;
        border: none;
        padding: 1.2rem 2rem;
    }
}

@media (max-width: 980px) {
    .menu-right__container {
        width: 100dvw;
    }
}