.container {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 16px;
}

.content {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.option-view-title {
    flex-shrink: 0;
}

.launch-configs-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    gap: 10px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.launch-configs-row {
    display: flex;
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid var(--neutral-foreground-rest);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    flex-shrink: 0;
}

.launch-config-identifier,
.launch-config-executable,
.launch-config-credentials,
.launch-config-name,
.launch-config-args,
.launch-config-steam,
.launch-config-custom-mods,
.launch-config-color,
.launch-config-reorder {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0px 20px 0px 20px;
    align-items: center;
    margin: 0 auto;
}

.launch-config-identifier-label,
.launch-config-executable-label,
.launch-config-credentials-label,
.launch-config-name-label,
.launch-config-args-label,
.launch-config-steam-label,
.launch-config-custom-mods-label,
.launch-config-color-label,
.launch-config-reorder-label {
    width: 250px;
}

.launch-config-identifier-field,
.launch-config-executable-field,
.launch-config-credentials-field,
.launch-config-name-field,
.launch-config-args-field,
.launch-config-steam-field,
.launch-config-custom-mods-field,
.launch-config-color-field,
.launch-config-reorder-buttons {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.launch-config-reorder-buttons {
    gap: 4px;
}

/* Limit dropdown height to prevent container overflow */
.launch-config-executable-field ::deep fluent-select::part(listbox),
.launch-config-credentials-field ::deep fluent-select::part(listbox),
.launch-config-color-field ::deep fluent-select::part(listbox) {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar styling for the dropdown */
.launch-config-executable-field ::deep fluent-select::part(listbox)::-webkit-scrollbar,
.launch-config-credentials-field ::deep fluent-select::part(listbox)::-webkit-scrollbar,
.launch-config-color-field ::deep fluent-select::part(listbox)::-webkit-scrollbar {
    width: 6px;
}

.launch-config-executable-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-track,
.launch-config-credentials-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-track,
.launch-config-color-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--neutral-fill-rest) 30%, transparent);
    border-radius: 3px;
}

.launch-config-executable-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-thumb,
.launch-config-credentials-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-thumb,
.launch-config-color-field ::deep fluent-select::part(listbox)::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--neutral-fill-strong-rest) 80%, transparent);
    border-radius: 3px;
}

/* Another alternative - target any text content */
.launch-config-identifier-label ::deep *,
.launch-config-executable-label ::deep *,
.launch-config-credentials-label ::deep *,
.launch-config-name-label ::deep *,
.launch-config-args-label ::deep *,
.launch-config-steam-label ::deep *,
.launch-config-custom-mods-label ::deep *,
.launch-config-color-label ::deep *,
.launch-config-reorder-label ::deep * {
    font-size: var(--font-size-large) !important;
}

.launch-config-identifier-field ::deep fluent-text-field,
.launch-config-executable-field ::deep fluent-text-field,
.launch-config-credentials-field ::deep fluent-text-field,
.launch-config-name-field ::deep fluent-text-field,
.launch-config-args-field ::deep fluent-text-field,
.launch-config-steam-field ::deep fluent-text-field,
.launch-config-custom-mods-field ::deep fluent-text-field,
.launch-config-color-field ::deep fluent-text-field {
    width: 100%;
    box-sizing: border-box !important;
    font-size: var(--font-size-large);
}

.launch-config-identifier-field ::deep fluent-select,
.launch-config-executable-field ::deep fluent-select,
.launch-config-credentials-field ::deep fluent-select,
.launch-config-name-field ::deep fluent-select,
.launch-config-args-field ::deep fluent-select,
.launch-config-steam-field ::deep fluent-select,
.launch-config-custom-mods-field ::deep fluent-select,
.launch-config-color-field ::deep fluent-select {
    width: 100%;
    box-sizing: border-box !important;
    font-size: var(--font-size-large) !important;
    --type-ramp-base-font-size: var(--font-size-large);
}

/* Color option styling */
.color-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    flex-shrink: 0;
}