Zelda64Recomp/assets/scss/styles/components/InputConfig.scss

@use 'sass:math';

// Probably will need to adjust for other langs...
$mapping-min-width: 80*8;
$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;

.input-config {
    padding: 0;
}

.input-config__horizontal-split {
    display: flex;
    position: relative;
    flex-direction: row;
    height: 100%;
}

.input-config__mappings {
    display: block;
    flex: 1 1 auto;
    height: 100%;
    min-width: space($mapping-min-width);
}

.input-config__mappings-scroll {
    display: block;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.input-config__mappings-wrapper {
    padding: space(8);
}

.input-config__visual-wrapper {
    display: block;
    width: auto;
    height: auto;
    max-width: space($visual-max-width);
    max-height: space(math.div($visual-max-width, 4) * 3);
    margin: auto 0;
    flex: 1 1 100%;
}

.input-config__visual-aspect {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    background-color: $color-bg-shadow;
    margin: auto 0;
}

.input-config__visual {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: space(16);
    right: space(16);
    bottom: space(16);
    left: space(16);
    border-radius: space(108);
    background-color: $color-white-a5;
}

.input-config__visual-half {
    display: flex;
    position: relative;
    flex-direction: row;
    flex: 1 1 100%;
    padding: 6%;

    &--bottom {
        align-items: flex-end;
        justify-content: space-between;
    }
}

.input-config__visual-quarter-left {
    display: flex;
    flex: 1 1 50%;
    width: auto;
    align-items: flex-start;
    justify-content: flex-start;
}

.input-config__visual-quarter-right {
    display: flex;
    flex: 1 1 100%;
    align-items: flex-start;
    justify-content: flex-end;
}

.input-config__visual-stick-wrapper {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.input-config__visual-stick {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: space(200);
    height: space(200);
    border-radius: space(100);
    background-color: $color-white-a5;
}

.input-viz {
    @include trans-colors-opa;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    > svg:not(.input-viz__dpad-arrow) {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    &__mappings div {
        @extend %prompt-font-sm;
    }
}

$all-inputs:
    A,
    B,
    Z,
    START,
    DPAD_UP,
    DPAD_DOWN,
    DPAD_LEFT,
    DPAD_RIGHT,
    L,
    R,
    C_UP,
    C_DOWN,
    C_LEFT,
    C_RIGHT,
    X_AXIS_NEG,
    X_AXIS_POS,
    Y_AXIS_NEG,
    Y_AXIS_POS;

// Show default state while no inputs are active
[cur-input="NONE"] .input-viz[visual-input] {
    opacity: 1;
}

@each $inp in $all-inputs {
    .input-viz[visual-input~="#{$inp}"] {
        opacity: 0.25;

        [cur-input="#{$inp}"] & {
            opacity: 1.0;
        }
    }
}

@mixin set-sizes($sz) {
    width: space($sz);
    height: space($sz);
    
    > svg {
        width: space($sz);
        height: space($sz);
    }
}

.input-viz__button {
    @include set-color($color-text);

    &--sm {
        @include set-sizes(64);
    }

    &--md {
        @include set-sizes(76);
    }

    &--lg {
        @include set-sizes(84);
    }

    &--C {
        @include set-svgs-color($color-warning);
    }

    &--A {
        @include set-svgs-color($color-a);
    }

    &--B {
        @include set-svgs-color($color-success);
    }
}

.input-viz__Z {
    @include set-svgs-color($color-warning);
    @include set-sizes(136);
}

$dpad-size: 192;
.input-viz.input-viz__dpad {
    @include set-svgs-color($color-text);
    @include set-sizes($dpad-size);
    $edge-dist: space(32);
    position: relative;
}

.input-viz__dpad-split {
    @include inset-block(0);
    display: flex;
    width: 100%;
    height: 100%;

    &--vertical {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    &--horizontal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    > div {
        display: flex;
        flex: 1 1 100%;
        width: space(math.div($dpad-size, 3));
        height: space(math.div($dpad-size, 3));
        align-items: center;
        justify-content: center;
        flex-direction: row;

        // .input-config__visual-mapping {
        //     display: block;
        // }
    }
}

.input-viz__dpad-arrow {
    position: absolute;
    width: space(60);
    height: space(60);
    $edge-dist: space(4);

    &--up {
        top: $edge-dist;
        margin: 0 auto;
    }

    &--down {
        bottom: $edge-dist;
        margin: 0 auto;
        transform: rotate(180deg);
    }

    &--left {
        left: $edge-dist;
        margin: auto 0;
        transform: rotate(-90deg);
    }

    &--right {
        right: $edge-dist;
        margin: auto 0;
        transform: rotate(90deg);
    }
}

.input-viz__R {
    @include set-svgs-color($color-white);
    @include set-sizes(96);
}

.input-viz__L {
    @include set-svgs-color($color-secondary);
    @include set-sizes(136);
}

.input-config__c-buttons {
    position: relative;
    width: space(76+76+56);
    height: space(76+56);

    &-lr, &-du {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    &-lr {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    &-du {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
    }

    .input-viz {
        &[visual-input="C_UP"] {
            margin-top: space(-32);
        }
    }
}