@import "/UI/Core/Styles/Theme.scss";

SettingsPage {
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px;

    color: rgba( 255, 255, 255, 0.88 );
    @include menu-font-body();

    &.surface-menu {
        padding-left: 10%;
    }

    &.surface-in-game {
        padding-left: 27%;
    }

    .settings-topbar {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        flex-shrink: 0;
    }

    .settings-topbar.with-back {
        align-items: stretch;
    }

    .settings-top-back {
        flex-shrink: 0;
        align-self: stretch;
        min-width: 118px;
    }

    .settings-top-back .ui-button {
        width: 100%;
        min-width: 118px;
        height: 100%;
    }

    .settings-group-row {
        flex-grow: 1;
        min-width: 0;
    }

    .settings-group-row .ui-setting-row {
        @include menu-surface( $background-color: rgba( 0, 0, 0, 0.32 ), $padding: 10px 12px );
    }

    .settings-group-row .ui-setting-row-main {
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    .settings-group-row .ui-setting-row-copy {
        min-width: 170px;
        max-width: 220px;
    }

    .settings-group-row .ui-setting-row-label {
        @include menu-eyebrow();
    }

    .settings-group-row .ui-setting-row-description {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.62 ), $tracking: 0.4px );
    }

    .settings-group-row .ui-setting-row-content {
        flex-grow: 1;
        min-width: 0;
        align-items: center;
        justify-content: flex-start;
    }

    .settings-groups {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .settings-group-buttons {
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .settings-group-button {
        min-width: 100px;
        justify-content: center;
    }

    UIButton .ui-button.settings-native-category-button {
        min-width: 54px;
        width: 54px;
        color: rgba( 255, 255, 255, 0.94 );
        border-color: rgba( 77, 175, 255, 0.78 );
        background-color: rgba( 33, 96, 150, 0.55 );
        box-shadow: 0px 8px 28px rgba( 0, 0, 0, 0.28 );
    }

    UIButton .ui-button.settings-native-category-button:hover:not(.disabled) {
        background-color: rgba( 47, 120, 182, 0.68 );
        border-color: rgba( 121, 195, 255, 0.86 );
    }

    .settings-group-actions-spacer {
        width: 60px;
        min-width: 20px;
        flex-shrink: 0;
    }

    .settings-group-actions {
        gap: 8px;
    }

    UIButton .ui-button.settings-save-button {
        gap: 8px;
        color: rgba(121, 195, 255, 0.82);
        border-color:  rgba(77, 175, 255, 0.62);
    }

    .settings-reset-all-button {
        margin-left: auto;
        border: 1px solid $warning-orange;
        color: $warning-orange;
    }

    UIButton .ui-button.settings-reset-all-button {
        padding: 4px;
        justify-content: center;
    }

    UIButton .ui-button.settings-reset-all-button .icon {
        font-size: 18px;
    }

    .settings-shell {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        flex-grow: 1;
        flex-direction: column;
        @include menu-surface();
        margin: 0;
        box-shadow: none;
    }

    .settings-shell.columns-mode-fit {
        width: auto;
        max-width: 100%;
        flex-grow: 0;
        align-self: flex-start;
    }

    .settings-content {
        width: 100%;
        min-height: 0;
        flex-grow: 1;
        flex-direction: column;
        gap: 0;
    }

    .settings-shell.columns-mode-fit .settings-content {
        width: auto;
    }

    .settings-list {
        width: 100%;
        min-height: 0;
        flex-grow: 1;
        flex-direction: column;
        overflow-y: scroll;
    }

    .settings-shell.columns-mode-fit .settings-list {
        width: auto;
        max-width: 100%;
    }

    .settings-columns {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        gap: 10px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .settings-columns.columns-mode-fit,
    .settings-columns.columns-mode-fill {
        width: 100%;
    }

    .settings-main-columns {
        min-height: 0;
        min-width: 0;
        flex-grow: 1;
        flex-shrink: 1;
        flex-direction: row;
        gap: 10px;
        align-items: flex-start;
    }

    .settings-columns.columns-mode-fit .settings-main-columns {
        width: auto;
        max-width: 100%;
    }

    .settings-columns.columns-mode-fill .settings-main-columns {
        width: 100%;
    }

    .settings-column-slot {
        width: auto;
        min-width: 0;
        flex-direction: column;
        gap: 8px;
    }

    .settings-columns.columns-mode-fill .settings-column-slot {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
    }

    .settings-columns.columns-mode-fit .settings-column-slot {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .settings-column-label {
        @include menu-eyebrow( $color: rgba( 255, 255, 255, 0.62 ) );
        padding-left: 2px;
    }

    .settings-column {
        min-height: 0;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .settings-subgroup {
        width: 100%;
    }

    .settings-subgroup .ui-settings-section {
        @include menu-surface-alt();
        gap: 10px;
    }

    .settings-subgroup .ui-settings-section-title {
        @include menu-eyebrow();
        padding-left: 0;
    }

    .settings-subgroup-list {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .settings-subgroup-list SettingEntry {
        width: 100%;
    }

    .settings-subgroup-widgets {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .settings-widget {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 10px;
        @include menu-surface-alt();
        align-items: stretch;
    }

    .settings-widget-title {
        @include menu-eyebrow();
    }

    .settings-widget-copy {
        @include menu-copy( $size: 11px, $color: rgba( 255, 255, 255, 0.68 ), $tracking: 0.4px );
    }

    .crosshair-preview-box {
        position: relative;
        width: 100%;
        height: 220px;
        border-radius: 6px;
        border: 1px solid rgba( 255, 255, 255, 0.1 );
        background-color: rgba( 0, 0, 0, 0.18 );
        overflow: hidden;
    }

    .settings-color-control {
        width: 100%;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid rgba( 255, 255, 255, 0.1 );
        background-color: rgba( 0, 0, 0, 0.18 );
    }

    .settings-color-control ColorControl {
        width: 100%;
    }

    .settings-empty {
        @include menu-copy( $size: 12px, $color: rgba( 255, 255, 255, 0.66 ), $tracking: 0.5px );
        padding: 6px 2px;
    }
}