// ============================================================================
// Imports
// ============================================================================
@use "sass:math";
@use "../../../dev" as *;
@use "../../../variables" as *;

// ============================================================================
// Variables
// ============================================================================

$arrow_size: q(12);
$bar_height: q(2);
$duration: 0.5s;
$easing: cubic-bezier(0.25, 1.7, 0.35, 0.8);

// ============================================================================
// Mixin: Flipper Button Base - VERTICAL
// ============================================================================

@mixin flipper_button--base {
    position: absolute;
    background: transparent;
    cursor: pointer;
    display: block;
    z-index: 9999;
    overflow: visible;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: $arrow_size;
        height: $bar_height;
        background-color: var(--color_state_link);
        transition: all $duration $easing;
        transform-origin: center center;
    }

    &.active {
        &::before,
        &::after {
            background-color: var(--color_state_active);
        }
    }
}
// ============================================================================
// Mixin: Flipper Button Base - VERTICAL
// ============================================================================
@mixin flipper_button--base--vertical {
    width: $arrow_size * 2;
    height: $arrow_size;
    @include flipper_button--base;
}

// ============================================================================
// Mixin: Flipper Button Base - HORIZONTAL
// ============================================================================
@mixin flipper_button--base--horizontal {
    width: $arrow_size;
    height: $arrow_size * 2;
    @include flipper_button--base;
}

// ============================================================================
// Mixin: Flipper Button Variants
// ============================================================================

// Left variant
@mixin flipper--left {
    @include flipper_button--base--horizontal;

    &::before {
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    &::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    &.active {
        &::before {
            transform: translate(-50%, -50%) rotate(120deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(-120deg);
        }
    }
}

// Right variant
@mixin flipper--right {
    @include flipper_button--base--horizontal;

    &::before {
        top: 0%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    &::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    &.active {
        &::before {
            transform: translate(-50%, -50%) rotate(-120deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(120deg);
        }
    }
}

// Up variant
@mixin flipper--up {
    @include flipper_button--base--vertical;

    &::before {
        top: 50%;
        left: 15%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    &::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    &.active {
        &::before {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }
}

// Down variant
@mixin flipper--down {
    @include flipper_button--base--vertical;

    &::before {
        top: 50%;
        left: 15%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    &::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    &.active {
        &::before {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
    }
}