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: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.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 auto;
    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 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        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.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);
}

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