src/settings/solid-js/settings.module.scss
@use 'src/styles/variables' as *;
@use 'src/styles/color-theme-builder' as *;

:global {
  body {
    margin: 0;
    user-select: none;
    width: 340px;
  }
}

.settings {
  --settings-background-color: white;

  $theme-light: (
    'primary': $color-blue-mariner,
    'secondary': $color-blue-mariner-light,
    'background': white,
    'surface': white,
  );

  $colors: get-theme-colors($theme-light);
  @include theme-colors-as-custom-properties($colors);

  min-height: 100%;
  background-color: var(--settings-background-color);
  color: var(--mdc-theme-text-primary-on-background);

  &_dark {
    --settings-background-color: #{$color-gray-shark};

    $theme-dark: (
      'primary': darken(white, 20%),
      'secondary': $color-blue-mariner-light,
      'background': $color-gray-shark,
      'surface': $color-gray-shark,
    );

    $colors: get-theme-colors($theme-dark);
    @include theme-colors-as-custom-properties($colors);
  }
}

.settings__form {
  margin: 0;
}

.settings__row {
  composes: mdc-form-field from global;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 16px 5px 10px;
  height: 40px;
}

.bottomActions {
  composes: settings__row;

  flex-direction: row-reverse;
}

.iconInLabel {
  composes: materialIcon from global;

  margin-right: 6px;
  color: var(--mdc-theme-text-icon-on-background);
}

.settings__label {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
}
