
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
@import './app/scss/mixins';
@import 'variables';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$dark-primary-text: #020d10;
$light-primary-text: #FFF;
$mat-black: (
  50: #efefef,
  100: #d6d8d8,
  200: #b7bfc1,
  300: #97a6aa,
  400: #7f9398,
  500: #678087,
  600: #5b7176,
  700: #5b7176,
  800: #4c5d61,
  900: #2D3436,
  contrast: (
    50: $light-primary-text,
    100: $light-primary-text,
    200: $light-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
  )
);

$mat-white: (
  50: #efefef,
  100: #fff,
  200: #fff,
  300: #fff,
  400: #fff,
  500: #fff,
  600: #fff,
  700: #fff,
  800: #fff,
  900: #fff,
  contrast: (
    50: $light-primary-text,
    100: $light-primary-text,
    200: $light-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
  )
);

$mat-green: (
  50: #e9f9ea,
  100: #cbefcc,
  200: #a9e5ac,
  300: #86db8b,
  400: #6dd173,
  500: #55c85a,
  600: #4bb850,
  700: #3fa545,
  800:#35933a,
  900: #217328,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);


$obscurify3-primary: mat-palette($mat-black, 900, 700, 500);
$obscurify3-accent: mat-palette($mat-green, 200, 500, 100);

// The warn palette is optional (defaults to red).
$obscurify3-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$obscurify3-theme: mat-light-theme($obscurify3-primary, $obscurify3-accent, $obscurify3-warn);

$dark-primary: mat-palette($mat-white);
$dark-accent:  mat-palette($mat-white);
$dark-warn:    mat-palette($mat-red);
$dark-foreground: #fff;

$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
  $font-family: $primary-font,
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 700)
);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat-select-typography($custom-typography);

@include angular-material-theme($obscurify3-theme);

.dark-theme {
  @include angular-material-theme($dark-theme)
}



html, body { height: 100%; width: 100%; scroll-behavior: smooth;}
body { margin: 0; font-family: $primary-font; font-size: 16px; font-weight: bold; -webkit-font-smoothing: antialiased}

h1,h2,h3,h4,h5,p,li,ul {
    margin: 0;
    padding: 0;
}

button, a {
    font-size: inherit;
}

a {
    font-weight: normal;
    touch-action: manipulation;
}

$primary-font: 'Helvetica Neue', sans-serif;
$secondary-font: -apple-system, BlinkMacSystemFont, 'Segoe UI';

.obscurity__rating__select {
  min-height: 500px;
}

.panel-success {
    color: $primary-color;
}

.panel-error {
    color: red;
}

.slate {
  padding: 8rem 1em;
}

.sticky_sentinel {
  position: absolute;
  left: 0;
  right: 0; /* needs dimensions */
}
.sticky_sentinel--top {
  /* Adjust the height and top values based on your on your sticky top position.
  e.g. make the height bigger and adjust the top so observeHeaders()'s
  IntersectionObserver fires as soon as the bottom of the sentinel crosses the
  top of the intersection container. */
  height: 40px;
  top: -24px;
  z-index: -1;

}
.sticky_sentinel--bottom {
  /* Height should match the top of the header when it's at the bottom of the
  intersection container. */
  height: 40px;
  bottom: 0;
  z-index: -1;
}

.bottom-sheet__artist__nav {
  padding: 2em 1em !important;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1em;
}

html, body { height: 100%; }
body { margin: 0; font-family: "Helvetica Neue", sans-serif; }

button {
  font-family:  "Helvetica Neue", sans-serif;
  cursor: pointer;
}
