@import "../var.scss";
@import "../mixins/transition.scss";

$j-prefix-burger: "#{$j-prefix}-burger" !default;
$j-prefix-burger-line: "#{$j-prefix}-burger-line" !default;

.#{$j-prefix-burger} {
    position: relative;
    display: inline-block;
    cursor: pointer;
    @include transition();

    .#{$j-prefix-burger-line} {
        width: 30px;
        height: 3px;
        background: $j-black;
        margin: 6px 0;
        @include transition();
    }

    &.light {
        .#{$j-prefix-burger-line} {
            background: #fff;
        }
    }

    &[data-active] {
        .#{$j-prefix-burger-line} {
            &:first-child {
                transform: rotate(-45deg) translate(-5px, 6px);
            }

            &:nth-child(2) {
                opacity: 0;
            }

            &:nth-child(3) {
                transform: rotate(45deg) translate(-7px, -8px);
            }
        }
    }
}