@use 'sass:map';
@use '/node_modules/@angular/material' as mat;
@import "/node_modules/@angular/material/theming";
@include mat.core();

@function modify-background($theme, $background-color) {
  // Replace the background in the color object's background palette.
  $theme-color: map-get($theme, color);
  $color-background-palette: map-get($theme-color, background);
  $color-background-palette: map-merge($color-background-palette, (background: $background-color));
  $color-background-palette: map-merge($color-background-palette, (raised-button: $background-color));

  // Replace the background in the background palette.
  $background-palette: map-get($theme, background);
  $background-palette: map-merge($background-palette, (background: $background-color));
  $background-palette: map-merge($background-palette, (raised-button: $background-color));

  // Merge the changes into a new theme.
  $modified-theme-color: map-merge($theme-color, (background: $color-background-palette));
  $modified-theme: map-merge($theme, (color: $modified-theme-color));
  $modified-theme: map-merge($modified-theme, (background: $background-palette));

  @return $modified-theme;
}

$angular-primary: mat.define-palette(mat.$blue-palette, 500, 100, 900);
$angular-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
$angular-warn: mat.define-palette(mat.$red-palette);

$angular-theme: mat.define-dark-theme(
    (
      color: (
        primary: $angular-primary,
        accent: $angular-accent,
        warn: $angular-warn
      ),
    )
);

$angular-theme: modify-background($angular-theme, #0f1724);

@include mat.all-component-themes($angular-theme);

$primary: #8e5bd2;
$secondary: #11a8bd;

$gradient: linear-gradient(90deg, $primary, $secondary);
$gradient-angled: linear-gradient(135deg, $primary, $secondary);
$gradient-straight: linear-gradient($primary, $secondary);

$padding: 12.5vw;
$padding-small: 5vw;

$desc-color: #7c8393;
$border-color: #2d2d2d;

$color-config: mat.get-color-config($angular-theme);
$background: map.get($color-config, 'background');
$text: map.get($color-config, 'foreground');

body {
  background-color: map.get($background, 'background');
}

* {
  color: map.get($text, 'text');
}

.title {
  font-size: 35px;
  display: inline;
  margin-right: 10px;
}

.home-section {
  padding-inline: $padding;
  user-select: none;
  margin-bottom: 100px;

  &.mobile {
    padding-inline: $padding-small;

    .title {
      font-size: 25px;
    }
  }
}

.mat-mdc-text-field-wrapper {
  background-color: map.get($background, 'background') !important;
}