@use 'sass:math';

///////////////////////////////////////////////////////////////////////////////////////
// All variables and mixins within this file are able to be overridden by
// developers using Payload. No CSS definitions should be placed in this file.
///////////////////////////////////////////////////////////////////////////////////////

/////////////////////////////
// BREAKPOINTS
/////////////////////////////

$breakpoint-xs-width: 400px !default;
$breakpoint-s-width: 768px !default;
$breakpoint-m-width: 1024px !default;
$breakpoint-l-width: 1440px !default;

//////////////////////////////
// BASELINE GRID
//////////////////////////////

$baseline-px         : 25px !default;
$baseline-body-size  : 13px !default;
$baseline            : math.div($baseline-px, $baseline-body-size) + rem;

@function base($multiplier) {
	@return math.div($baseline-px, $baseline-body-size) * $multiplier + rem;
}

//////////////////////////////
// FONTS
//////////////////////////////

$font-body  : 'Suisse Intl' !default;
$font-mono  : monospace !default;

//////////////////////////////
// COLORS
//////////////////////////////

$color-dark-gray       : #333333 !default;
$color-gray            : #9A9A9A !default;
$color-light-gray      : #DADADA !default;
$color-background-gray : #F3F3F3 !default;
$color-red             : #ff6f76 !default;
$color-yellow          : #FDFFA4 !default;
$color-green           : #B2FFD6 !default;
$color-purple          : #F3DDF3 !default;

//////////////////////////////
// STYLES
//////////////////////////////

$style-radius-s     : 3px !default;
$style-radius-m     : 4px !default;
$style-stroke-width : 1px !default;

$style-stroke-width-s : 1px !default;
$style-stroke-width-m : 2px !default;

//////////////////////////////
// MISC
//////////////////////////////

$top-header-offset: calc(#{base(4)} - 1px);
$top-header-offset-m: base(3);
$focus-box-shadow: 0 0 0 $style-stroke-width-m $color-green;

//////////////////////////////
// SHADOWS
//////////////////////////////

@mixin shadow-sm {
  box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.1), 0 6px 4px -4px rgba(0, 2, 4, 0.02);
}

@mixin shadow-lg {
  box-shadow: 0 2px 20px 7px rgba(0, 2, 4, 0.1), 0 6px 4px -4px rgba(0, 2, 4, 0.02);
}

@mixin shadow-lg-top {
  box-shadow: 0 -2px 20px 7px rgba(0, 2, 4, 0.1), 0 6px 4px -4px rgba(0, 2, 4, 0.02);
}

@mixin shadow {
  box-shadow: 0 12px 45px rgba(0,0,0,.03);

  &:hover {
    	box-shadow: 0 12px 45px rgba(0,0,0,.07);
  }
}

@mixin inputShadowActive {
	box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.16), 0 6px 4px -4px rgba(0, 2, 4, 0.13);
}

@mixin inputShadow {
  @include shadow-sm;

  &:not(:disabled) {
    &:hover {
      box-shadow: 0 2px 3px 0 rgba(0, 2, 4, 0.13), 0 6px 4px -4px rgba(0, 2, 4, 0.1);
    }

    &:active, &:focus {
      @include inputShadowActive;
    }
  }
}

@mixin soft-shadow-bottom {
  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
}

//////////////////////////////
// STYLE MIXINS
//////////////////////////////

@mixin blur-bg($color: $color-background-gray) {
  background: rgba($color, .7);
  backdrop-filter: saturate(180%) blur(5px);
}

@mixin formInput () {
  @include inputShadow;
  font-family: $font-body;
  width: 100%;
  border: 1px solid $color-light-gray;
  background: white;
  color: $color-dark-gray;
  border-radius: 0;
  font-size: 1rem;
  height: base(2);
  line-height: base(1);
  padding: base(.5) base(.75);
  -webkit-appearance: none;

  &::-webkit-input-placeholder {
    color: $color-gray;
    font-weight: normal;
    font-size: 1rem;
  }

  &::-moz-placeholder {
    color: $color-gray;
    font-weight: normal;
    font-size: 1rem;
  }

  &:hover {
    border-color: darken($color-light-gray, 10%);
  }

  &:focus,
  &:active {
    border-color: $color-gray;
    outline: 0;
  }

  &:disabled {
    background: lighten($color-light-gray, 5%);
    color: darken($color-gray, 5%);

    &:hover {
      border-color: $color-light-gray;
    }
  }

  @include small-break {
      margin-bottom: base(.5);
  }
}
