.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem;
    width: 100%;
    gap: 4rem;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 56rem;
    gap: 4rem;
}

.controller_type_switch {
    margin-top: 2rem;
    display: flex;
    border: 0.1rem solid var(--dark_600_color);
    border-radius: 0.4rem;
    width: 80%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dark_600_color);
    &:hover {
        color: var(--dark_400_color);
    }
}
.controller_type_switcher {
    width: 100%;
    &.is_selected {
        background-color: var(--dark_850_color);
    }
    &.is_selected .controller_switcher_label {
        color: var(--dark_200_color);
    }
}
.controller_switcher_label {
    padding: 1rem;
    font-size: 1.6rem;
}

.position_rotation_controls_box {
    margin-top: 8rem;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 36%;
    max-width: 36rem;
    transform: translate(-10%);
}

.sample_text_button_wrapper {
    position: absolute;
    bottom: -12%;
    left: -80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    // transform: translate(-50%, -50%);
}
.sample_text_button {
    background-color: var(--dark_850_color);
    padding: 1.8rem;
    border-radius: 50%;
    &:hover {
        background-color: var(--dark_800_color);
    }
    &:active {
        background-color: var(--dark_925_color);
    }
    &.is_started {
        background-color: var(--primary_600_color);
        &:hover {
            background-color: var(--primary_500_color);
        }
        &:active {
            background-color: var(--primary_700_color);
        }
    }
}
.sample_text_button_triangle_svg, .sample_text_button_square_svg {
    width: 2.4rem;
}
.sample_text_button_triangle_svg {
    transform: translateX(10%) rotate(90deg);
}
.sample_text_button_label {
    position: absolute;
    left: 50%;
    top: 110%;
    // bottom: -2rem;
    transform: translateX(-50%);
    white-space: pre-wrap;
    font-size: 1.2rem;
    width: max-content;
    text-align: center;
}

// .position_controls {
//     background-color: gray;
// }

// .position_wrapper {
//     background-color: gray;
// }

.slider_label {
    font-size: 1.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}
.x_position_label {
    position: absolute;
    bottom: -5rem;
    right: -46%;
    justify-content: end;
}
.y_position_label {
    position: absolute;
    bottom: 110%;
    right: 119%;
    justify-content: end;
}
.z_position_label {
    position: absolute;
    top: 14%;
    left: 110%;
}

.x_position_slider {
    position: absolute;
    bottom: 0;
    left: 27%;
    width: 100%;
    height: 0%;
}

.y_position_slider {
    position: absolute;
    bottom: 27%;
    left: 0;
    width: 0%;
    height: 100%;
}

.z_position_slider {
    position: absolute;
    bottom: 80%;
    left: 88%;
    transform: translate(50%,50%) rotate(45deg);
    width: 0%;
    height: 100%;
}


%variable-button {
    width: 3.8rem;
    border-radius: 0.4rem;
    aspect-ratio: 1.2 / 1;
    background-color: var(--dark_850_color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    cursor: pointer;

    &:hover {
        background-color: var(--primary_500_color);
    }
    &:active {
        background-color: var(--primary_600_color);
    }
    &.is_disabled {
        pointer-events: none;
        background-color: var(--dark_875_color);
        & .adjust_button_triangle_svg {
            color: var(--dark_800_color);
        }
    }
}

@mixin variable-button-wrapper($vertical-pos, $vertical-value, $horizontal-pos, $horizontal-value, $rotate: 0deg) {
    position: absolute;
    #{$vertical-pos}: $vertical-value;
    #{$horizontal-pos}: $horizontal-value;
    display: flex;
    gap: 1.6rem;
    flex-direction: column;
    transform: translate(-50%) rotate($rotate);
}

.button_wrapper {
    @extend %variable-button;

    &.up .adjust_button_triangle_svg {
        transform: rotate(0deg);
    }
    &:not(.up) .adjust_button_triangle_svg {
        transform: rotate(180deg);
    }
    &.is_disabled {
        pointer-events: none;
        color: var(--dark_875_color);
    }
}

.adjust_button_triangle_svg {
    width: 1.8rem;
    color: var(--dark_400_color);
}



.y_position_button_wrapper {
    @include variable-button-wrapper(top, 30%, left, -26%);
}

.x_position_button_wrapper {
    @include variable-button-wrapper(bottom, -38%, left, 46%, 90deg);
}

.z_position_button_wrapper {
    @include variable-button-wrapper(bottom, 26%, right, -4%, 45deg);
}



// .rotation_controls {
//     background-color: gray;
// }

// .rotation_wrapper {
//     background-color: gray;
// }

.x_rotation_label {
    position: absolute;
    bottom: 110%;
    right: 119%;
    justify-content: end;
}
.y_rotation_label {
    position: absolute;
    bottom: -5rem;
    right: -46%;
    justify-content: end;
}
.z_rotation_label {
    position: absolute;
    top: -20%;
    right: -100%;
}

.x_rotation_slider {
    position: absolute;
    bottom: 27%;
    left: 0;
    width: 0%;
    height: 100%;
}

.y_rotation_slider {
    position: absolute;
    bottom: 0;
    left: 27%;
    width: 100%;
    height: 0%;
}

.z_rotation_slider {
    position: absolute;
    bottom: 80%;
    left: 100%;
    transform: translate(50%,50%) rotate(-45deg);
    width: 0%;
    height: 100%;
}



.x_rotation_button_wrapper {
    @include variable-button-wrapper(top, 30%, left, -26%);
}

.y_rotation_button_wrapper {
    @include variable-button-wrapper(bottom, -38%, left, 46%, 90deg);
}

.z_rotation_button_wrapper {
    @include variable-button-wrapper(bottom, 50%, right, -60%, -45deg);
}



.slider_reset_button {
    background-color: var(--dark_875_color);
    padding: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
    flex-shrink: 0;
    &:hover {
        background-color: var(--dark_825_color);
        & .slider_reset_svg {
            color: var(--dark_200_color);
        }
    }
    &:active {
        background-color: var(--dark_925_color);
    }
}

.slider_reset_svg {
    width: 1.4rem;
    color: var(--dark_550_color);
}



.other_controls {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
}

.other_controls_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}
.other_controls_slider {
    // margin-left: 18rem;
    // width: 60%;
}

.other_controls_slider_label {
    // position: absolute;
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 30%;
}

.common_container {
    width: 100%;
}

.common_label {
    font-size: 1.4rem;
}

.restore_default_settings_button {
    font-size: 1.2rem;
    margin-top: 6rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
    &:hover {
        background-color: var(--dark_775_color);
    }
    &:active {
        background-color: var(--dark_900_color);
    }
}