@use "variables" as *;
@use "functions" as f;
@use "sass:string" as s;
@use "sass:math" as m;
@use "sass:color" as c;

/**
 * Contents:
 * - MEDIA QUERIES
 * - HELPERS
 */

// --------------------------------------------------
// MEDIA QUERIES
// --------------------------------------------------

@mixin mq($breakpoint, $width: 425px, $max-width: 1024px) {
  @if $breakpoint == xsup {
    @media only screen and (min-width: $xs) {
      @content;
    }
  } @else if $breakpoint == smup {
    @media only screen and (min-width: $sm) {
      @content;
    }
  } @else if $breakpoint == mdup {
    @media only screen and (min-width: $md) {
      @content;
    }
  } @else if $breakpoint == lgup {
    @media only screen and (min-width: $lg) {
      @content;
    }
  } @else if $breakpoint == xlup {
    @media only screen and (min-width: $xl) {
      @content;
    }
  } @else if $breakpoint == xxl {
    @media only screen and (min-width: $xxl) {
      @content;
    }
  }

  @if $breakpoint == xxs {
    @media only screen and (max-width: ($xs - 1)) {
      @content;
    }
  } @else if $breakpoint == xs {
    @media only screen and (max-width: ($sm - 1)) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media only screen and (max-width: ($md - 1)) {
      @content;
    }
  } @else if $breakpoint == md {
    @media only screen and (max-width: ($lg - 1)) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media only screen and (max-width: ($xl - 1)) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media only screen and (max-width: ($xxl - 1)) {
      @content;
    }
  }

  @if $breakpoint == max {
    @media only screen and (max-width: $width) {
      @content;
    }
  } @else if $breakpoint == min {
    @media only screen and (min-width: $width) {
      @content;
    }
  } @else if $breakpoint == min-max {
    @media only screen and (min-width: $width) and (max-width: $max-width) {
      @content;
    }
  }

  @if $breakpoint == ipad {
    @media only screen and (min-width: 1023px) and (max-width: 1025px) and (min-height: 1365px) and (max-height: 1367px) and (-webkit-min-device-pixel-ratio: 1.5) {
      @content;
    }
  } @else if $breakpoint == mobile {
    @media only screen and (hover: none) and (pointer: coarse) {
      @content;
    }
  } @else if $breakpoint == stylus {
    @media (hover: none) and (pointer: fine) {
      @content;
    }
  } @else if $breakpoint == controller {
    @media (hover: hover) and (pointer: coarse) {
      @content;
    }
  }
}

// --------------------------------------------------
// HELPERS
// --------------------------------------------------

@mixin elements($set: asterisk) {
  @if $set == asterisk {
    *,
    *:before,
    *:after {
      @content;
    }
  } @else if $set == margin-padding {
    blockquote,
    body,
    button,
    dl,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ol,
    p,
    pre,
    ul {
      @content;
    }
  } @else if $set == legacy {
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    main,
    nav,
    section,
    summary {
      @content;
    }
  } @else if $set == cursor {
    button,
    [class*="btn-"],
    .c-pointer,
    [role="button"],
    [type="checkbox"],
    [type="checkbox"] + label,
    [type="radio"],
    [type="radio"] + label,
    [type="submit"],
    [type="reset"],
    select,
    summary {
      @content;
    }
  } @else if $set == button {
    button,
    [class*="btn-"],
    [type="button"],
    [type="reset"],
    [type="submit"] {
      @content;
    }
  } @else if $set == select {
    input[type="checkbox"] + label,
    input[type="radio"] + label {
      @content;
    }
  } @else if $set == input {
    [type="email"],
    [type="password"],
    [type="text"],
    textarea {
      @content;
    }
  } @else if $set == font-global {
    a,
    abbr,
    address,
    article,
    aside,
    b,
    bdi,
    bdo,
    blockquote,
    body,
    button,
    caption,
    cite,
    code,
    data,
    dd,
    del,
    details,
    dfn,
    dialog,
    div,
    dl,
    dt,
    em,
    fieldset,
    figcaption,
    footer,
    form,
    header,
    i,
    input,
    ins,
    kbd,
    label,
    legend,
    li,
    main,
    mark,
    nav,
    ol,
    optgroup,
    option,
    output,
    p,
    pre,
    q,
    s,
    samp,
    section,
    select,
    span,
    strong,
    summary,
    table,
    tbody,
    td,
    template,
    textarea,
    tfoot,
    th,
    thead,
    time,
    tr,
    u,
    ul,
    var,
    wbr {
      @content;
    }
  } @else if $set == line-height {
    a,
    abbr,
    address,
    article,
    aside,
    b,
    bdi,
    bdo,
    blockquote,
    body,
    button,
    caption,
    cite,
    code,
    data,
    dd,
    del,
    details,
    dfn,
    dialog,
    div,
    dl,
    dt,
    em,
    fieldset,
    figcaption,
    footer,
    form,
    header,
    i,
    input,
    ins,
    kbd,
    label,
    legend,
    li,
    main,
    mark,
    nav,
    ol,
    optgroup,
    option,
    output,
    p,
    pre,
    q,
    s,
    samp,
    section,
    select,
    small,
    span,
    strong,
    sub,
    summary,
    sup,
    table,
    tbody,
    td,
    template,
    textarea,
    tfoot,
    th,
    thead,
    time,
    tr,
    u,
    ul,
    var,
    wbr {
      @content;
    }
  } @else if $set == font-family {
    a,
    abbr,
    address,
    article,
    aside,
    b,
    bdi,
    bdo,
    blockquote,
    body,
    button,
    caption,
    cite,
    data,
    dd,
    del,
    details,
    dfn,
    dialog,
    div,
    dl,
    dt,
    em,
    fieldset,
    figcaption,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    i,
    input,
    ins,
    label,
    legend,
    li,
    main,
    mark,
    nav,
    ol,
    optgroup,
    option,
    output,
    p,
    q,
    s,
    section,
    select,
    small,
    span,
    strong,
    sub,
    summary,
    sup,
    table,
    tbody,
    td,
    template,
    textarea,
    tfoot,
    th,
    thead,
    time,
    tr,
    u,
    ul,
    var,
    wbr {
      @content;
    }
  } @else if $set == monospace {
    pre,
    code,
    kbd,
    samp {
      @content;
    }
  }
}

@mixin font(
  $defaultBoldOrItalic: f,
  $font-family,
  $file,
  $font-weight: 400,
  $font-style: normal,
  $fallback: $sans-serif-fb
) {
  @font-face {
    font-family: "#{$font-family}";
    src: url("../fonts/#{$file}.eot");
    src: url("../fonts/#{$file}.eot?#iefix") format("embedded-opentype"),
      url("../fonts/#{$file}.woff") format("woff"),
      url("../fonts/#{$file}.ttf") format("truetype"),
      url("../fonts/#{$file}.svg?#webfont") format("svg");
    font-weight: $font-weight;
    font-style: $font-style;
    font-display: swap;
  }

  .ff-#{s.to-lower-case($font-family)} {
    font-family: "#{$font-family}", $fallback;
    font-weight: $font-weight;
    font-style: $font-style;
  }

  @if $defaultBoldOrItalic == t {
    @if $font-weight == 400 {
      @if $font-style == italic {
        body {
          em,
          i {
            font-family: "#{$font-family}", $fallback;
          }
        }
      }
    }

    @if $font-weight == 700 {
      @if $font-style == normal {
        body {
          b,
          strong {
            font-family: "#{$font-family}", $fallback;
          }
        }
      } @else if $font-style == italic {
        b,
        strong {
          & > em,
          & > i {
            font-family: "#{$font-family}", $fallback;
          }
        }
      }
    }
  }
}

@mixin head {
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    @content;
  }
}

@mixin all($value, $ampersand: f, $attribute: class) {
  @if $ampersand == f {
    [#{$attribute}*="#{$value}"] {
      @content;
    }
  } @else if $ampersand == t {
    &[#{$attribute}*="#{$value}"] {
      @content;
    }
  } @else if $ampersand == in {
    & > [#{$attribute}*="#{$value}"] {
      @content;
    }
  }
}

@mixin prefix($declaration, $prefixes: (), $prefix-property: t, $include: t) {
  @each $property, $value in $declaration {
    @if $prefix-property == t {
      @each $prefix in $prefixes {
        #{"-" + $prefix + "-" + $property}: $value;
      }
    } @else {
      @each $prefix in $prefixes {
        #{$property}: #{"-" + $prefix + "-" + $value};
      }
    }

    @content;

    @if $include == t {
      #{$property}: $value;
    }
  }
}

@mixin scrollbar(
  $scrollbar: f,
  $thumb: $black-05,
  $hover: $dgray,
  $track: $gray,
  $size: 10,
  $border-radius: f,
  $box-shadow: f,
  $percent: -20%
) {
  @if $scrollbar == t {
    ::-webkit-scrollbar {
      width: #{$size}px;
      height: #{$size}px;
    }

    ::-webkit-scrollbar-track {
      background: $track;

      @if $box-shadow == t {
        @include prefix(
          (
            box-shadow: inset 0 0 #{m.div($size, 2)}px #{c.adjust(
                $track,
                $lightness: $percent
              )}
          ),
          webkit moz
        );
      }

      @if $border-radius == t {
        @include prefix(
          (
            border-radius: #{$size}px
          ),
          webkit moz
        );
      }
    }

    ::-webkit-scrollbar-thumb {
      background: $thumb;

      @if $border-radius == t {
        @include prefix(
          (
            border-radius: #{$size}px
          ),
          webkit moz
        );
      }

      &:hover {
        background: $hover;
      }
    }
  }
}

@mixin sticky($z-item) {
  &.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: f.z("#{$z-item}");
    @content;
  }
}

@mixin pseudo($pseudo-element: before) {
  &:#{$pseudo-element} {
    content: ".";
    font-size: 0;
    @content;
  }
}

@mixin fa($content, $fa-type: fas, $pseudo-element: after) {
  &:#{$pseudo-element} {
    content: f.fa($content);
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    @if $fa-type == fas {
      font-weight: 900;
    } @else if $fa-type == fab {
      font-weight: 400;
    }

    @content;
  }
}

@mixin arrow(
  $direction,
  $size: 10px,
  $color: #000,
  $pseudo: f,
  $pseudo-element: after
) {
  @if $pseudo == f {
    width: 0;
    height: 0;
    border-width: $size;
    border-style: solid;
    border-color: transparent;
    border-#{$direction}-color: $color;
    @content;
  } @else {
    &:#{$pseudo-element} {
      content: ".";
      font-size: 0;
      width: 0;
      height: 0;
      border-width: $size;
      border-style: solid;
      border-color: transparent;
      border-#{$direction}-color: $color;
      @content;
    }
  }
}

@mixin clearfix {
  zoom: 1;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
  }
}

@mixin grab($important: f) {
  @if $important == f {
    cursor: grab;

    &:active {
      @include prefix(
        (
          cursor: grabbing
        ),
        webkit moz,
        f
      );
    }
  } @else {
    cursor: grab !important;

    &:active {
      @include prefix(
        (
          cursor: grabbing s.unquote("!important")
        ),
        webkit moz,
        f
      );
    }
  }
}

@mixin justify($center: t, $location: start, $important: f) {
  @if $center == t {
    @if $important == f {
      @include prefix(
        (
          justify-content: center
        ),
        webkit
      ) {
        @include prefix(
          (
            pack: center,
          ),
          webkit-box moz-box ms-flex
          t,
          f
        );
      }
    } @else {
      @include prefix(
        (
          justify-content: center s.unquote("!important")
        ),
        webkit
      ) {
        @include prefix(
          (
            pack: center s.unquote("!important"),
          ),
          webkit-box moz-box ms-flex
          t,
          f
        );
      }
    }
  } @else {
    @if $important == f {
      @include prefix(
        (
          justify-content: flex-#{$location} s.unquote("!important")
        ),
        webkit
      ) {
        @include prefix(
          (
            pack: $location
          ),
          webkit-box moz-box ms-flex,
          t,
          f
        );
      }
    } @else {
      @include prefix(
        (
          justify-content: flex-#{$location} s.unquote("!important")
        ),
        webkit
      ) {
        @include prefix(
          (
            pack: #{$location} s.unquote("!important")
          ),
          webkit-box moz-box ms-flex,
          t,
          f
        );
      }
    }
  }
}

@mixin align($set: i, $center: t, $location: start, $important: f) {
  @if $set == i {
    @if $center == t {
      @if $important == f {
        @include prefix(
          (
            align-items: center
          ),
          webkit
        ) {
          @include prefix(
            (
              align: center
            ),
            webkit-box moz-box ms-flex,
            t,
            f
          );
        }
      } @else {
        @include prefix(
          (
            align-items: center s.unquote("!important")
          ),
          webkit
        ) {
          @include prefix(
            (
              align: center s.unquote("!important")
            ),
            webkit-box moz-box ms-flex,
            t,
            f
          );
        }
      }
    } @else {
      @if $important == f {
        @include prefix(
          (
            align-items: flex-#{$location}
          ),
          webkit
        ) {
          @include prefix(
            (
              align: $location,
            ),
            webkit-box moz-box ms-flex,
            t,
            f
          );
        }
      } @else {
        @include prefix(
          (
            align-items: flex-#{$location} s.unquote("!important")
          ),
          webkit
        ) {
          @include prefix(
            (
              align: $location s.unquote("!important"),
            ),
            webkit-box moz-box ms-flex,
            t,
            f
          );
        }
      }
    }
  } @else if $set == c {
    @if $center == t {
      @if $important == f {
        @include prefix(
          (
            align-content: center
          ),
          webkit
        ) {
          @include prefix(
            (
              pack: center,
            ),
            ms-flex-line,
            t,
            f
          );
        }
      } @else {
        @include prefix(
          (
            align-content: center s.unquote("!important")
          ),
          webkit
        ) {
          @include prefix(
            (
              pack: center s.unquote("!important"),
            ),
            ms-flex-line,
            t,
            f
          );
        }
      }
    } @else {
      @if $important == f {
        @include prefix(
          (
            align-content: flex-#{$location}
          ),
          webkit
        ) {
          @include prefix(
            (
              pack: $location
            ),
            ms-flex-line,
            t,
            f
          );
        }
      } @else {
        @include prefix(
          (
            align-content: flex-#{$location} s.unquote("!important")
          ),
          webkit
        ) {
          @include prefix(
            (
              pack: $location s.unquote("!important")
            ),
            ms-flex-line,
            t,
            f
          );
        }
      }
    }
  }
}

@mixin flex($column: t, $important: f) {
  @if $important == f {
    @include prefix(
      (
        display: flex
      ),
      webkit,
      f
    ) {
      display: -ms-flexbox;

      @include prefix(
        (
          display: box
        ),
        webkit moz,
        f,
        f
      );
    }

    @include align;
    @include justify;
  } @else {
    @include prefix(
      (
        display: flex s.unquote("!important")
      ),
      webkit,
      f
    ) {
      display: -ms-flexbox !important;

      @include prefix(
        (
          display: box s.unquote("!important")
        ),
        webkit moz,
        f,
        f
      );
    }

    @include align(i, t, start, t);
    @include justify(t, start, t);
  }

  @if $column == t {
    @if $important == f {
      @include prefix(
        (
          flex-direction: column
        ),
        webkit ms
      ) {
        @include prefix(
          (
            box-orient: vertical
          ),
          webkit moz,
          t,
          f
        );

        @include prefix(
          (
            box-direction: normal
          ),
          webkit moz,
          t,
          f
        );
      }
    } @else {
      @include prefix(
        (
          flex-direction: column s.unquote("!important")
        ),
        webkit ms
      ) {
        @include prefix(
          (
            box-orient: vertical s.unquote("!important")
          ),
          webkit moz,
          t,
          f
        );

        @include prefix(
          (
            box-direction: normal s.unquote("!important")
          ),
          webkit moz,
          t,
          f
        );
      }
    }
  }
}

@mixin order($order, $important: f) {
  @if $important == f {
    @include prefix(
      (
        ordinal-group: $order + 1
      ),
      webkit-box moz-box,
      t,
      f
    );

    @include prefix(
      (
        order: $order
      ),
      webkit ms-flex
    );
  } @else {
    @include prefix(
      (
        ordinal-group: $order + 1 s.unquote("!important")
      ),
      webkit-box moz-box,
      t,
      f
    );

    @include prefix(
      (
        order: $order s.unquote("!important")
      ),
      webkit ms-flex
    );
  }
}

@mixin img-prop($background-prop: cover, $important: f) {
  @if $important == f {
    @if $background-prop == cover {
      background-repeat: no-repeat;
      background-position: center;

      @include prefix(
        (
          background-size: $background-prop
        ),
        webkit moz o
      );
    } @else if $background-prop == contain {
      @include prefix(
        (
          background-size: $background-prop
        ),
        webkit moz o
      );
    } @else {
      background-position: $background-prop;
    }
  } @else {
    @if $background-prop == cover {
      background-repeat: no-repeat !important;
      background-position: center !important;

      @include prefix(
        (
          background-size: $background-prop s.unquote("!important")
        ),
        webkit moz o
      );
    } @else if $background-prop == contain {
      @include prefix(
        (
          background-size: $background-prop s.unquote("!important")
        ),
        webkit moz o
      );
    } @else {
      background-position: $background-prop !important;
    }
  }
}

@mixin vis($visibility) {
  visibility: $visibility;

  @if $visibility == hidden {
    opacity: 0;
  } @else {
    opacity: 1;
  }

  @content;
}

@mixin tran($property: "all 0.5s") {
  @include prefix(
    (
      transition: s.unquote($property)
    ),
    webkit o moz
  );
}

@mixin bg($value) {
  background-image: $value;
}

@mixin keyframes($animation) {
  @-webkit-keyframes #{$animation} {
    @content;
  }

  @-moz-keyframes #{$animation} {
    @content;
  }

  @-o-keyframes #{$animation} {
    @content;
  }

  @keyframes #{$animation} {
    @content;
  }
}

@mixin grid-cont(
  $template: def,
  $row: auto,
  $column: auto,
  $number: 2,
  $row-number: 2,
  $column-number: 2
) {
  @if $template == def {
    @include prefix(
      (
        grid-rows: $row
      ),
      ms,
      t,
      f
    );

    @include prefix(
      (
        grid-columns: $column
      ),
      ms,
      t,
      f
    );

    grid-template: $row / $column;
  } @else if $template == r-rep {
    @include prefix(
      (
        grid-rows: s.unquote("(#{$row}) [#{$number}]")
      ),
      ms,
      t,
      f
    );

    @include prefix(
      (
        grid-columns: $column
      ),
      ms,
      t,
      f
    );

    grid-template: repeat(#{$number}, #{$row}) / $column;
  } @else if $template == c-rep {
    @include prefix(
      (
        grid-rows: $row
      ),
      ms,
      t,
      f
    );

    @include prefix(
      (
        grid-columns: s.unquote("(#{$column}) [#{$number}]")
      ),
      ms,
      t,
      f
    );

    grid-template: $row / repeat(#{$number}, #{$column});
  } @else if $template == a-rep {
    @include prefix(
      (
        grid-rows: s.unquote("(#{$row}) [#{$row-number}]")
      ),
      ms,
      t,
      f
    );

    @include prefix(
      (
        grid-columns: s.unquote("(#{$column}) [#{$column-number}]")
      ),
      ms,
      t,
      f
    );

    grid-template: repeat(#{$row-number}, #{$row}) / repeat(
        #{$column-number},
        #{$column}
      );
  }

  @content;
}

@mixin grid-item($set, $start: 1, $end: 2) {
  @if $set == row-se {
    @include prefix(
      (
        grid-row: $start
      ),
      ms,
      t,
      f
    ) {
      @include prefix(
        (
          grid-row-span: $end,
        ),
        ms,
        t,
        f
      );
    }

    grid-row: #{$start} / #{$end};
    @content;
  } @else if $set == row-s {
    @include prefix(
      (
        grid-row: $start
      ),
      ms,
      t
    );

    @content;
  } @else if $set == col-se {
    @include prefix(
      (
        grid-column: $start
      ),
      ms,
      t,
      f
    ) {
      @include prefix(
        (
          grid-column-span: $end
        ),
        ms,
        t,
        f
      );
    }

    grid-column: #{$start} / #{$end};
    @content;
  } @else if $set == col-s {
    @include prefix(
      (
        grid-column: $start
      ),
      ms,
      t
    );

    @content;
  }
}

@mixin pgnum($position: right) {
  #{$position}: 0;

  @include pseudo {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100vw;
    height: 100vh;
    #{$position}: 0;
    background: $lgray;

    @media print {
      display: none;
    }
  }
}