@use "sass:color";

@use "@material/theme/color-palette";

// Svelte Colors!
@use "@material/theme/index" as theme with (
  $primary: #0078e7,
  $secondary: #676778,
  $surface: #fff,
  $background: #fff,
  $error: color-palette.$red-900,
  $on-surface: #777
);

@use "@material/elevation/mdc-elevation";
@use "@material/list";

@include list.deprecated-core-styles;

:root {
  --mdc-theme-text-primary-on-background: #777;

  .mdc-dialog .mdc-dialog__container {
    transition: margin-bottom 0.5s;
  }

  .mdc-dialog .mdc-dialog__content {
    color: #777;
  }

  .mdc-dialog .mdc-dialog__title {
    color: #777;
    font-weight: bold;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
