@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: 20px;
        }
    }
}

#menu-toggler {
    display: none;
}

#menu-toggler-label {
    
    position: fixed;
    top: 15px;
    left: 15px;
    cursor: pointer;
    height: 30px;
    width: calc(100% - 40px);
    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;
        width: 30px;
        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);
    }
}


@mixin mediaFont($breakpoint, $fontsize) {
    @media screen and (min-width: #{$breakpoint}px) { font-size: #{$fontsize}; line-height: #{$fontsize}; }
}

::deep {
    h2 {
        font-size: 1.8rem;
        @include mediaFont($breakpointXS, 3.2rem);
        @include mediaFont($breakpointS, 3.8rem);
        @include mediaFont($breakpointM, 3.8rem);
        @include mediaFont($breakpointL, 3.8rem);
        @include mediaFont($breakpointXL, 3.8rem);
        @include mediaFont($breakpointXXL, 3.2rem);
    }

    h3 {
        font-size: 1.4rem;
        font-weight: 300;
        @include mediaFont($breakpointXS, 2.4rem);
        @include mediaFont($breakpointS, 2.8rem);
        @include mediaFont($breakpointM, 2.8rem);
        @include mediaFont($breakpointL, 2.8rem);
        @include mediaFont($breakpointXL, 2.8rem);
        @include mediaFont($breakpointXXL, 2.4rem);
    }
}