@import '../Style/_variables';

$sidebarBreakpoint: $breakpointM;

.page {
    display: flex;
    height: 100vh;

    aside {
        background-color: #f1e7c9;
        width: 0;
        box-shadow: 5px 5px 5px #acacac;
        transition: width 250ms;
        overflow: hidden auto;

        @media screen and (min-width: #{$sidebarBreakpoint}px) {
            width: 250px;
            min-width: 250px;
        }
    }

    main {
        flex: 1;
        width: 100%;
        overflow: hidden auto;
        padding: 60px 10px 10px 10px;

        @media screen and (min-width: #{$sidebarBreakpoint}px) {
            padding: 15px;
        }
    }
}

#menu-toggler {
    display: none;
}

#menu-toggler-label {
    
    position: fixed;
    top: 15px;
    left: 15px;
    cursor: pointer;
    height: 30px;
    width: 30px;
    z-index: 1;

    @media screen and (min-width: #{$sidebarBreakpoint}px) {
        display: none;
    }
    
    span {
        height: 6px;
        background-color: #64ae24;
        position: absolute;
        border-radius: 3px;
        left: 0;
        right: 0;
        transition: all 0.25s ease-out;
        
        &:nth-child(2) {
            top: 12px;
        }
        
        &:nth-child(3) {
            top: 24px;
        }
    }
}

input:checked ~ aside {
    width: 250px;
}

input:checked ~ #menu-toggler-label span {
    &:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }

    &:nth-child(2) {
        display: none;
    }
    
    &:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }
}


::deep {
    h2 {
        font-size: 7.8vw;
        @media screen and (min-width: #{$breakpointXS}px) { font-size: 4.8vw; }
        @media screen and (min-width: #{$breakpointXS}px) { font-size: 3.6vw; }
    }
}