/*
      MAIN MIXIN
      Handcrafted By WhiteCube.
      ---------------------------

      Shapes, positions and sets a rotation to pseudo-element
      in order to make a leaning border (with a background-image
      if you want to).
      The anchor point will be positionned exactly where you
      want it, even if the pseudo-element's anchor point is
      outside the parent-element.
      Use this mixin along with your other styling rules inside
      your pseudo-element in order to make something beautiful.

      -----

      @include kaduk( $position, $degrees, $width )

      $position: string ('bottom-right'|'bottom-left'|'top-right'|'top-left');
      $degrees: int (with 'deg' unit)
      $width: int (with css width unit. Width of pseudo-element)

      -----

      # EXAMPLE - TEST IT
      ---------------------------
      In order to truly understand what this does,
      test this code.

      ## HTML
      -------

      <div class="kaduk-test"><p>Some content</p></div>

      ## SCSS
      -------

      .kaduk-test{
            position: relative;
            width: 400px;
            height: 200px;
            background: #000;
            &:before{
                  @include kaduk('bottom-right', -3.5deg, 200%);
                  background: rgba(#c8c8c8, 0.8);
            }
      }


      # FUNCTIONS
      ---------------------------
*/
/*
      # MIXINS
      ---------------------------
*/
/**
 * Needs a bit of JS to work:
 * 
 * yarn add object-fit-images
 *
 * Then in main JS script
 * import objectFitImages from 'object-fit-images';
 * objectFitImages();
 */
:root {
  --shade-darkest: #000000;
  --shade-darker: #16101E;
  --shade-dark: #16101E;
  --shade-medium-4: #757575;
  --shade-medium-3: #ABAAAA;
  --shade-medium-2: #DDDDDD;
  --shade-medium-1: #EBEBEB;
  --shade-light: #F2F2F2;
  --shade-lighter: #F9F9F9;
  --shade-lightest: #ffffff;
  --theme-neutral-darker: #16101E;
  --theme-neutral-dark: #291E38;
  --theme-neutral-medium: #6E607E;
  --theme-neutral-light: #B5AFBE;
  --theme-neutral-lighter: #F8F6FE;
  --theme-accent-dark: #422D8D;
  --theme-accent-medium: #6143CC;
  --theme-accent-light: #C1B4F1;
  --theme-accent-lighter: #EFECFA;
  --state-valid-dark: #1AA855;
  --state-valid-medium: #1EBE60;
  --state-valid-light: #E7F8F1;
  --state-error-dark: #E62D2D;
  --state-error-medium: #E62D2D;
  --state-error-light: #FBEDEA;
  --state-warning-dark: #FF9100;
  --state-warning-medium: #FF9100;
  --state-warning-light: #FBF4EB;
  --state-info-dark: #00579B;
  --state-info-medium: #3D8BE9;
  --state-info-light: #f1f7ff;
  --state-favorite-dark: #F5A623;
  --state-favorite-medium: #FFDD36;
  --state-favorite-light: #FBF4EB;
  --rgb-shade-darkest: 0, 0, 0;
  --rgb-shade-darker: 22, 16, 30;
  --rgb-shade-dark: 22, 16, 30;
  --rgb-shade-medium-4: 117, 117, 117;
  --rgb-shade-medium-3: 171, 170, 170;
  --rgb-shade-medium-2: 221, 221, 221;
  --rgb-shade-medium-1: 235, 235, 235;
  --rgb-shade-light: 242, 242, 242;
  --rgb-shade-lighter: 249, 249, 249;
  --rgb-shade-lightest: 255, 255, 255;
  --rgb-theme-neutral-darker: 22, 16, 30;
  --rgb-theme-neutral-dark: 41, 30, 56;
  --rgb-theme-neutral-medium: 110, 96, 126;
  --rgb-theme-neutral-light: 181, 175, 190;
  --rgb-theme-neutral-lighter: 248, 246, 254;
  --rgb-theme-accent-dark: 66, 45, 141;
  --rgb-theme-accent-medium: 97, 67, 204;
  --rgb-theme-accent-light: 193, 180, 241;
  --rgb-state-valid-dark: 26, 168, 85;
  --rgb-state-valid-medium: 30, 190, 96;
  --rgb-state-valid-light: 231, 248, 241;
  --rgb-state-error-dark: 230, 45, 45;
  --rgb-state-error-medium: 230, 45, 45;
  --rgb-state-error-light: 251, 237, 234;
  --rgb-state-warning-dark: 255, 145, 0;
  --rgb-state-warning-medium: 255, 145, 0;
  --rgb-state-warning-light: 251, 244, 235;
  --rgb-state-info-dark: 0, 87, 155;
  --rgb-state-info-medium: 61, 139, 233;
  --rgb-state-info-light: 241, 247, 255;
  --rgb-state-favorite-dark: 245, 166, 35;
  --rgb-state-favorite-medium: 255, 221, 54;
  --rgb-state-favorite-light: 251, 244, 235;
}

/*# sourceMappingURL=default.css.map*/