.settings {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.settings__section {
  background-color: var(--mantine-color-other-backgroundColors-main);
  padding: 0;
}

.settingLabel {
  flex: 0 0 200px;
}

.settingControl {
  flex: 1;
  max-width: 300px;
}

.sectionTitle {
  letter-spacing: 0.5px;
}

.settingCard {
  padding: 1rem;
  background-color: transparent;
  border: none;
  border-radius: 8px;
}

.settings :global(.mantine-Select-input) {
  background-color: var(--mantine-color-other-backgroundColors-card);
  border-color: var(--mantine-color-other-colors-border);
  color: var(--mantine-color-other-colors-body);
}

.settings :global(.mantine-Select-input:focus) {
  border-color: var(--mantine-color-other-colors-border);
}

.settings :global(.mantine-Select-dropdown) {
  background-color: var(--mantine-color-other-backgroundColors-card);
  border-color: var(--mantine-color-other-colors-border);
}

.settings :global(.mantine-Select-item) {
  color: var(--mantine-color-other-colors-body);
}

.settings :global(.mantine-Select-item[data-selected]) {
  background-color: var(--mantine-color-other-backgroundColors-main);
  color: var(--mantine-color-other-colors-body);
}

.settings :global(.mantine-Select-item:hover) {
  background-color: var(--mantine-color-other-backgroundColors-main);
}

.settings :global(.mantine-Title-root) {
  color: var(--mantine-color-primary-1);
}

.settings :global(.mantine-Text-root) {
  color: var(--mantine-color-secondary-1);
}

.settings :global(.mantine-TextInput-label),
.settings :global(.mantine-Select-label) {
  color: var(--mantine-color-tertiary-1);
}
