@import "../../include/mixins";

:root {
    --transform-button-color: #000000;
}

.dark-side {
    --transform-button-color: #ffffff;
}

.transform-button {
    width: 36px;
    height: 36px;
    background-size: 1rem 1rem;
    background: center center no-repeat;
    text-indent: -9999px;
    border: 0;
    display: inline-block;
    cursor: pointer;
    z-index: 2;
    position: relative;
    outline: none;

    span {
        position: absolute;
        left: .5rem;
        width: 1.2rem;
        height: 2px;
        margin: 0 0 0;
        background: var(--transform-button-color);
        .rotate(0);
        .transition(.3s, linear);

        &:before, &:after {
            content: '';
            position: absolute;
            top: -.5rem;
            right: 0;
            width: 1.2rem;
            height: 2px;
            background: var(--transform-button-color);
            .rotate(0);
            .transition(.3s, linear);
        }

        &:after {
            top: .5rem;
        }
    }

    &.transform {
        span {
            .rotate(180deg);

            &:before, &:after {
                content: '';
                top: -5px;
                right: 0;
                width: .75rem;
                .rotate(45deg);
            }

            &:after {
                top: 5px;
                .rotate(-45deg);
            }
        }

        &.right {
            .rotate(-180deg);
            span {
                margin-top: -2px;
            }
        }

        &.up {
            .rotate(90deg);
        }

        &.down {
            .rotate(-90deg);
        }

        &.top-left {
            .rotate(45deg);
        }

        &.top-right {
            .rotate(135deg);
        }

        &.bottom-left {
            .rotate(-45deg);
        }

        &.bottom-right {
            .rotate(-135deg);
        }
    }
}