@import "variables.scss";

@mixin headings {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @content;
  }
}

@mixin neumorphism(
  $borderRadius: 40px,
  $highlightOffset: -20px,
  $shadowOffset: 20px,
  $blurRadius: 40px
) {
  background: $color-offwhite;
  box-shadow: $highlightOffset $highlightOffset $blurRadius $color-white,
    $shadowOffset $shadowOffset $blurRadius rgba(58, 56, 146, 0.1);
  border-radius: $borderRadius;
}

@mixin form-fields($state: null) {
  font-size: $font-size-default;
  line-height: $line-height-default;
  color: $color-text;

  &::placeholder {
    color: $color-text-light;
  }

  &:focus {
    color: $color-text;
  }

  &[readonly] {
    background: $color-white;
    color: $color-text-light;
  }

  &:disabled {
    background: transparent;
    color: $color-text-light;
  }

  @if $state == "error" {
    color: $color-error;
  }
  @if $state == "focus" {
    color: $color-primary;
  }
  @if $state == "primary" {
    border-color: $color-primary-500;
  }
  @if $state == "secondary" {
    border-color: $color-secondary-500;
  }
  @if $state == "success" {
    border-color: $color-success-500;
  }
  @if $state == "warning" {
    border-color: $color-warning-500;
  }
}

@mixin form-fields-border($state: null) {
  border: 2px solid $color-gray-xxlight;
  border-radius: 5px;
  box-shadow: none;

  @if $state == "error" {
    border-color: $color-error;
  }
  @if $state == "focus" {
    border-color: $color-primary;
  }
  @if $state == "primary" {
    border-color: $color-primary-500;
  }
  @if $state == "secondary" {
    border-color: $color-secondary-500;
  }
  @if $state == "success" {
    border-color: $color-success-500;
  }
  @if $state == "warning" {
    border-color: $color-warning-500;
  }
}

// https://css-tricks.com/snippets/css/fluid-typography/
@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}
