/*
  This SCSS file should be included in your global index.html.
  creates classes for mixins, colors and the grid.
*/

// The grid system we will be relying on.
@import './grid.scss';

@import './variables.scss';

@import '~@angular/cdk/overlay-prebuilt.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$spacePrefix: pg-space;
$spacePrefixAlt: grit-space;

.pg-space-top-4,
.grit-space-top-4 {
  margin-top: 4px;
}

.pg-space-bottom-4,
.grit-space-bottom-4 {
  margin-bottom: 4px;
}

.noscroll {
  overflow: hidden;
}

@keyframes onAutoFillStart {
  from {
    /**/
  }
  to {
    /**/
  }
}
@keyframes onAutoFillCancel {
  from {
    /**/
  }
  to {
    /**/
  }
}

input:-webkit-autofill {
  // Expose a hook for JavaScript when autofill is shown
  // JavaScript can capture 'animationstart' events
  animation-name: onAutoFillStart;

  // Make the background color become yellow really slowly
  transition: background-color 1ms ease-in-out 0s;
}
input:not(:-webkit-autofill) {
  // Expose a hook for JS onAutoFillCancel
  // JavaScript can capture 'animationstart' events
  animation-name: onAutoFillCancel;
}

@for $i from 1 through 12 {
  .#{$spacePrefix}-top-#{($i * 8)} {
    margin-top: #{($i * 8)}px;
  }
  .#{$spacePrefix}-bottom-#{($i * 8)} {
    margin-bottom: #{($i * 8)}px;
  }
  .#{$spacePrefixAlt}-top-#{($i * 8)} {
    margin-top: #{($i * 8)}px;
  }
  .#{$spacePrefixAlt}-bottom-#{($i * 8)} {
    margin-bottom: #{($i * 8)}px;
  }
}

@for $zValue from 0 through 5 {
  .#{$_pg-elevation-prefix}#{$zValue} {
    @include pg-elevation($zValue);
  }

  .#{$_grit-elevation-prefix}#{$zValue} {
    @include pg-elevation($zValue);
  }
}

.flex-spacer {
  flex: 1 1 auto;
}

.is-blurred {
  filter: blur(2px);
}
// THe following font-classes are deprecated
.font-display-l {
  @include font-display-l;
}

.font-display-m {
  @include font-display-m;
}

.font-display-s {
  @include font-display-s;
}

.font-headline {
  @include font-headline;
}

.font-title-l {
  @include font-title-l;
}

.font-title-m {
  @include font-title-m;
}

.font-title-s {
  @include font-title-s;
}

.font-subheading {
  @include font-subheading;
}

.font-body-l {
  @include font-body-l;
}

.font-body-s {
  @include font-body-s;
}

.font-button {
  @include font-button;
}

.font-caption {
  @include font-caption;
}

.font-field-label-l {
  @include font-field-label-l;
}

.font-field-label-s {
  @include font-field-label-s;
}

.font-link-l {
  @include font-link-l;
}

.font-link-s {
  @include font-link-s;
}
// --

// Color classes
/*
  Color classes have the !important modifier 
  because the only reason you would specify a 
  color class is to override all existing colors on an element
  which may have a stronger specificity.
*/
// use the new colors .bg-x100 .fg-x200 etc...

.bg-blue100 {
  background-color: $blue100 !important;
}

.fg-blue100 {
  color: $blue100 !important;
}

.bg-blue200 {
  background-color: $blue200 !important;
}

.fg-blue200 {
  color: $blue200 !important;
}

.bg-blue300 {
  background-color: $blue300 !important;
}

.fg-blue300 {
  color: $blue300 !important;
}

.bg-blue400 {
  background-color: $blue400 !important;
}

.fg-blue400 {
  color: $blue400 !important;
}

.bg-blue500 {
  background-color: $blue500 !important;
}

.fg-blue500 {
  color: $blue500 !important;
}

.bg-blue600 {
  background-color: $blue600 !important;
}

.fg-blue600 {
  color: $blue600 !important;
}

.bg-blue700 {
  background-color: $blue700 !important;
}

.fg-blue700 {
  color: $blue700 !important;
}

.bg-purple100 {
  background-color: $purple100 !important;
}

.fg-purple100 {
  color: $purple100 !important;
}

.bg-purple200 {
  background-color: $purple200 !important;
}

.fg-purple200 {
  color: $purple200 !important;
}

.bg-purple300 {
  background-color: $purple300 !important;
}

.fg-purple300 {
  color: $purple300 !important;
}

.bg-purple400 {
  background-color: $purple400 !important;
}

.fg-purple400 {
  color: $purple400 !important;
}

.bg-purple500 {
  background-color: $purple500 !important;
}

.fg-purple500 {
  color: $purple500 !important;
}

.bg-purple600 {
  background-color: $purple600 !important;
}

.fg-purple600 {
  color: $purple600 !important;
}

.bg-purple700 {
  background-color: $purple700 !important;
}

.fg-purple700 {
  color: $purple700 !important;
}

.bg-teal100 {
  background-color: $teal100 !important;
}

.fg-teal100 {
  color: $teal100 !important;
}

.bg-teal200 {
  background-color: $teal200 !important;
}

.fg-teal200 {
  color: $teal200 !important;
}

.bg-teal300 {
  background-color: $teal300 !important;
}

.fg-teal300 {
  color: $teal300 !important;
}

.bg-teal400 {
  background-color: $teal400 !important;
}

.fg-teal400 {
  color: $teal400 !important;
}

.bg-teal500 {
  background-color: $teal500 !important;
}

.fg-teal500 {
  color: $teal500 !important;
}

.bg-teal600 {
  background-color: $teal600 !important;
}

.fg-teal600 {
  color: $teal600 !important;
}

.bg-teal700 {
  background-color: $teal700 !important;
}

.fg-teal700 {
  color: $teal700 !important;
}

.bg-orange100 {
  background-color: $orange100 !important;
}

.fg-orange100 {
  color: $orange100 !important;
}

.bg-orange200 {
  background-color: $orange200 !important;
}

.fg-orange200 {
  color: $orange200 !important;
}

.bg-orange300 {
  background-color: $orange300 !important;
}

.fg-orange300 {
  color: $orange300 !important;
}

.bg-orange400 {
  background-color: $orange400 !important;
}

.fg-orange400 {
  color: $orange400 !important;
}

.bg-orange500 {
  background-color: $orange500 !important;
}

.fg-orange500 {
  color: $orange500 !important;
}

.bg-orange600 {
  background-color: $orange600 !important;
}

.fg-orange600 {
  color: $orange600 !important;
}

.bg-orange700 {
  background-color: $orange700 !important;
}

.fg-orange700 {
  color: $orange700 !important;
}

.bg-yellow100 {
  background-color: $yellow100 !important;
}

.fg-yellow100 {
  color: $yellow100 !important;
}

.bg-yellow200 {
  background-color: $yellow200 !important;
}

.fg-yellow200 {
  color: $yellow200 !important;
}

.bg-yellow300 {
  background-color: $yellow300 !important;
}

.fg-yellow300 {
  color: $yellow300 !important;
}

.bg-yellow400 {
  background-color: $yellow400 !important;
}

.fg-yellow400 {
  color: $yellow400 !important;
}

.bg-yellow500 {
  background-color: $yellow500 !important;
}

.fg-yellow500 {
  color: $yellow500 !important;
}

.bg-yellow600 {
  background-color: $yellow600 !important;
}

.fg-yellow600 {
  color: $yellow600 !important;
}

.bg-yellow700 {
  background-color: $yellow700 !important;
}

.fg-yellow700 {
  color: $yellow700 !important;
}

.bg-red100 {
  background-color: $red100 !important;
}

.fg-red100 {
  color: $red100 !important;
}

.bg-red200 {
  background-color: $red200 !important;
}

.fg-red200 {
  color: $red200 !important;
}

.bg-red300 {
  background-color: $red300 !important;
}

.fg-red300 {
  color: $red300 !important;
}

.bg-red400 {
  background-color: $red400 !important;
}

.fg-red400 {
  color: $red400 !important;
}

.bg-red500 {
  background-color: $red500 !important;
}

.fg-red500 {
  color: $red500 !important;
}

.bg-red600 {
  background-color: $red600 !important;
}

.fg-red600 {
  color: $red600 !important;
}

.bg-red700 {
  background-color: $red700 !important;
}

.fg-red700 {
  color: $red700 !important;
}

.bg-green100 {
  background-color: $green100 !important;
}

.fg-green100 {
  color: $green100 !important;
}

.bg-green200 {
  background-color: $green200 !important;
}

.fg-green200 {
  color: $green200 !important;
}

.bg-green300 {
  background-color: $green300 !important;
}

.fg-green300 {
  color: $green300 !important;
}

.bg-green400 {
  background-color: $green400 !important;
}

.fg-green400 {
  color: $green400 !important;
}

.bg-green500 {
  background-color: $green500 !important;
}

.fg-green500 {
  color: $green500 !important;
}

.bg-green600 {
  background-color: $green600 !important;
}

.fg-green600 {
  color: $green600 !important;
}

.bg-green700 {
  background-color: $green700 !important;
}

.fg-green700 {
  color: $green700 !important;
}

.bg-neutral100 {
  background-color: $neutral100 !important;
}

.fg-neutral100 {
  color: $neutral100 !important;
}

.bg-neutral200 {
  background-color: $neutral200 !important;
}

.fg-neutral200 {
  color: $neutral200 !important;
}

.bg-neutral300 {
  background-color: $neutral300 !important;
}

.fg-neutral300 {
  color: $neutral300 !important;
}

.bg-neutral400 {
  background-color: $neutral400 !important;
}

.fg-neutral400 {
  color: $neutral400 !important;
}

.bg-neutral500 {
  background-color: $neutral500 !important;
}

.fg-neutral500 {
  color: $neutral500 !important;
}

.bg-neutral600 {
  background-color: $neutral600 !important;
}

.fg-neutral600 {
  color: $neutral600 !important;
}

.bg-neutral700 {
  background-color: $neutral700 !important;
}

.fg-neutral700 {
  color: $neutral700 !important;
}

.bg-neutral800 {
  background-color: $neutral800 !important;
}

.fg-neutral800 {
  color: $neutral800 !important;
}

.bg-neutral900 {
  background-color: $neutral900 !important;
}

.fg-neutral900 {
  color: $neutral900 !important;
}

.bg-neutral1000 {
  background-color: $neutral1000 !important;
}

.fg-neutral1000 {
  color: $neutral1000 !important;
}

.bg-brandBlue100 {
  background-color: $brandBlue100 !important;
}

.fg-brandBlue100 {
  color: $brandBlue100 !important;
}

.bg-brandBlue200 {
  background-color: $brandBlue200 !important;
}

.fg-brandBlue200 {
  color: $brandBlue200 !important;
}

.bg-brandBlue300 {
  background-color: $brandBlue300 !important;
}

.fg-brandBlue300 {
  color: $brandBlue300 !important;
}

.bg-brandBlue400 {
  background-color: $brandBlue400 !important;
}

.fg-brandBlue400 {
  color: $brandBlue400 !important;
}

.bg-brandBlue500 {
  background-color: $brandBlue500 !important;
}

.fg-brandBlue500 {
  color: $brandBlue500 !important;
}

.bg-brandBlue600 {
  background-color: $brandBlue600 !important;
}

.fg-brandBlue600 {
  color: $brandBlue600 !important;
}

.bg-brandBlue700 {
  background-color: $brandBlue700 !important;
}

.fg-brandBlue700 {
  color: $brandBlue700 !important;
}

.bg-brandBlue800 {
  background-color: $brandBlue800 !important;
}

.fg-brandBlue800 {
  color: $brandBlue800 !important;
}
.bg-darkNeutral100 {
  background-color: $darkNeutral100 !important;
}
.fg-darkNeutral100 {
  color: $darkNeutral100 !important;
}
.bg-darkNeutral200 {
  background-color: $darkNeutral200 !important;
}
.fg-darkNeutral200 {
  color: $darkNeutral200 !important;
}
.bg-darkNeutral300 {
  background-color: $darkNeutral300 !important;
}
.fg-darkNeutral300 {
  color: $darkNeutral300 !important;
}
.bg-darkNeutral400 {
  background-color: $darkNeutral400 !important;
}
.fg-darkNeutral400 {
  color: $darkNeutral400 !important;
}
.bg-darkNeutral500 {
  background-color: $darkNeutral500 !important;
}
.fg-darkNeutral500 {
  color: $darkNeutral500 !important;
}
.bg-darkNeutral600 {
  background-color: $darkNeutral600 !important;
}
.fg-darkNeutral600 {
  color: $darkNeutral600 !important;
}
.bg-darkNeutral700 {
  background-color: $darkNeutral700 !important;
}
.fg-darkNeutral700 {
  color: $darkNeutral700 !important;
}
.bg-darkNeutral800 {
  background-color: $darkNeutral800 !important;
}
.fg-darkNeutral800 {
  color: $darkNeutral800 !important;
}
.bg-darkNeutral900 {
  background-color: $darkNeutral900 !important;
}
.fg-darkNeutral900 {
  color: $darkNeutral900 !important;
}