AlexAegis/loreplotter

@import '~@angular/material/theming';

:host {
    div {
        width: 40px;
        height: 30px;
        position: relative;
        margin: 50px auto;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        cursor: pointer;
    }

    div span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        // background-color: mat-color($accent);
        border-radius: 0;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
    }

    div span:nth-child(1) {
        top: 0;
    }
    div span:nth-child(2) {
        top: 12px;
    }

    div span:nth-child(3) {
        top: 24px;
    }

    div.open span:nth-child(1) {
        top: 12px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    div.open span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }

    div.open span:nth-child(3) {
        top: 12px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
}