@forward './global-variables.scss';
@use 'sass:list';

$desktop: 1500px !default;
$smallDesktop: 1400px !default;
$bigTablet: 1024px !default;
$tablet: 900px !default;
$bigPhone: 720px !default;
$phone: 440px !default;
$smallPhone: 360px !default;

$fontFamily: Arial, Helvetica, sans-serif !default;
$fontFamilyTitle: var(--font-family) !default;
$fontSize: 1.6rem !default;

@mixin breakpoint($point: null, $type: down width) {
  @if ($point != null) {
    $whichProp: 'width';

    @if (
      list.length($type) >
        1 and
        (nth($type, 1) == 'height' or nth($type, 2) == 'height')
    ) {
      $whichProp: 'height';
    }

    @if (list.length($point) > 1) {
      $maxPoint: nth($point, 2);
      $minPoint: nth($point, 1);

      @if (nth($point, 1) > nth($point, 2)) {
        $maxPoint: nth($point, 1);
        $minPoint: nth($point, 2);
      }

      $finalMinPoint: $minPoint + 1;
      $finalMaxPoint: $maxPoint;

      @if (nth($type, 1) == 'up' or nth($type, 2) == 'up') {
        $finalMinPoint: $minPoint;
        $finalMaxPoint: $maxPoint - 1;
      }

      @media (min-#{$whichProp}: #{$finalMinPoint}) and (max-#{$whichProp}: #{$finalMaxPoint}) {
        @content;
      }
    } @else {
      $finalPoint: $point;
      $finalType: 'max-#{$whichProp}';

      @if (list.length($type) > 1) {
        @if (list.nth($type, 1) == 'up' or nth($type, 2) == 'up') {
          $finalPoint: $point + 1;
          $finalType: 'min-#{$whichProp}';
        }
      } @else {
        @if (list.nth($type, 1) == 'up') {
          $finalPoint: $point + 1;
          $finalType: 'min-#{$whichProp}';
        }
      }

      @media ($finalType: #{$finalPoint}) {
        @content;
      }
    }
  } @else {
    @warn "Unfortunately, value from first parameter : `#{$point}` - is not a valid one. "
                + "Please use valid value.";
  }
}

@mixin styles {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  html {
    font-size: 0.625em;
    font-size: calc(1em * 0.625);
  }

  :root {
    --bms-font-family: #{$fontFamily};
    --bms-font-family-title: #{$fontFamilyTitle};
    --bms-font-size: #{$fontSize};
    color: var(--bms-font-color);
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: var(--bms-font-family);
    color: var(--bms-font-color);
    margin: 16px 0;
  }

  h1 {
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
  }

  h2 {
    font-size: 28px;
    font-weight: 400;
    line-height: 24px;
  }

  h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
  }

  .information {
    font-size: 14px;
    color: var(--bms-grey-75);
  }

  a {
    color: var(--bms-main-100);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  body {
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-family: var(--bms-font-family);
    color: var(--bms-font-color);
    font-size: var(--bms-font-size);
    background-color: var(--bms-background-color);
  }

  section {
    border: 1px solid var(--bms-border-color);
    background-color: var(--bms-white);
    border-radius: var(--bms-border-radius-large);
    padding: 1em 2em 1em 2em;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity var(--transition-duration, 0.2s) linear;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .slide-left-fade-enter-active,
  .slide-left-fade-leave-active {
    transition:
      transform var(--transition-duration, 0.2s) ease-in-out,
      opacity var(--transition-duration, 0.2s) linear;
  }

  .slide-left-fade-enter-from,
  .slide-left-fade-leave-to {
    opacity: 0;
    transform: translate3d(-10%, 0, 0);
  }

  .table-fade-enter-active,
  .table-fade-leave-active {
    transition: all 0.3s ease;
  }

  .table-fade-enter-from,
  .table-fade-leave-to {
    opacity: 0;
    max-height: 0;
  }
  .table-fade-enter-to,
  .table-fade-leave-from {
    opacity: 1;
    max-height: 300px;
  }

  .u-text-align-start {
    text-align: start;
  }

  .u-text-align-center {
    text-align: center;
  }

  .u-text-align-end {
    text-align: end;
  }
}
