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-secondary-a5;
    margin: auto 0;
}

.input-config__visual {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.input-viz {
    position: relative;
}

$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.5;

        [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);
}