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

SettingEntry {
    width: 100%;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba( 255, 255, 255, 0.08 );
    background-color: rgba( 0, 0, 0, 0.14 );

    .setting-row {
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .setting-title {
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: rgba( 255, 255, 255, 0.86 );
        text-shadow: none;
    }

    .setting-spacer {
        flex-grow: 1;
    }

    UIButton .ui-button.setting-reset-button {
        min-width: 20px;
        width: 24px;
        height: 20px;
        padding: 3.5px;
        justify-content: center;
        border: 1px solid $warning-orange;

        .icon {
            font-size: 15px;
            color: $warning-orange;
        }
    }

    .setting-value {
        align-items: center;
        justify-content: flex-end;
    }

    .setting-value.bool {
        padding: 0;
        border-left: 0;
        background-color: transparent;
    }

    .setting-value-text {
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 12px;
        color: rgba( 255, 255, 255, 0.84 );
        text-shadow: none;
        min-width: 48px;
        text-align: right;
    }

    .setting-description {
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 11px;
        color: rgba( 255, 255, 255, 0.62 );
        text-shadow: none;
        padding-left: 2px;
        letter-spacing: 0.4px;
    }

    .setting-slider {
        border-top: 0;
        background-color: transparent;
        padding: 1px 0 0;
    }

    .setting-slider UISlider {
        width: 100%;
    }

    .setting-options-row {
        padding: 2px 0 0;
    }

    .settings-text-entry {
        margin: 0;
        min-width: 64px;
        height: 32px;

        .content-label,
        .prefix-label,
        .suffix-label {
            color: rgba( 255, 255, 255, 0.88 );
            text-shadow: none;
            font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
            font-size: 12px;
        }
    }

    UIToggle .title {
        font-family: "Dinish", "Dinish-Regular", "Dinish-Bold";
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba( 255, 255, 255, 0.8 );
        text-shadow: none;
        min-width: 24px;
    }

    .setting-missing {
        font-size: 14px;
        color: rgba( 255, 255, 255, 0.6 );
        text-shadow: none;
    }

    &.developer-only {
        border-color: rgba( $warning-orange, 0.48 );
        background-color: rgba( $warning-orange, 0.06 );

        .setting-title {
            color: rgba( $warning-orange, 0.96 );
        }
    }

    &.compact {
        padding: 8px 9px;
        gap: 4px;

        .setting-title {
            font-size: 10px;
        }

        .setting-description {
            font-size: 11px;
        }

        .settings-text-entry {
            height: 28px;
        }
    }
}