@use "../abstracts/variables" as vars;

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: vars.rem(320);
    height: 100%;
    background-color: vars.$footer-bg;
    z-index: 10001;
    transition: left 0.5s vars.$footer-accent; // Fallback, but using GSAP primarily
    padding: vars.rem(40) vars.rem(20);
    box-shadow: vars.rem(5) 0 vars.rem(15) rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;

    &.active {
        left: 0;
    }

    &__close {
        position: absolute;
        top: vars.rem(20);
        right: vars.rem(20);
        font-size: clamp(18px, 2vw + 0.5rem, 24px);
        color: #fff;
        cursor: pointer;
        background: transparent;
        border: none;
        transition: transform 0.3s ease;

        &:hover {
            transform: rotate(90deg);
            color: vars.$footer-accent;
        }
    }

    &__logo {
        margin-bottom: vars.rem(40);
        img {
            max-width: vars.rem(150);
        }
    }

    &__nav {
        flex-grow: 1;
    }

    &__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    &__item {
        margin-bottom: vars.rem(15);
    }

    &__link {
        font-family: vars.$font-family-base;
        font-weight: 600;
        font-size: clamp(15px, 1vw + 1rem, 18px);
        color: #fff;
        text-decoration: none;
        display: block;
        padding: vars.rem(10) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;

        &:hover {
            color: vars.$footer-accent;
            padding-left: vars.rem(10);
            text-decoration: none;
        }
    }

    &__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;

        &.active {
            opacity: 1;
            visibility: visible;
        }
    }
}