@use 'sass:math';
$rem-base: 15px;

/* Colors */
$colorWhite: #ffffff;
$colorGrey: #3a3c49;
$colorGreyLight: #bfbfbf;
$colorGreyHighlight: #4c4c4c;
$colorGreyMedium: #5f697a;
$colorGreyDark: #1a1c25;

/* CI Colors */
$colorPrimary: #14a693;
$colorPrimaryHighlight: #15bfa9;
$colorPrimaryAlpha: rgba(20, 166, 147, 0.15);
$colorSecondary: #524bb1;
$colorSecondaryHighlight: #6962cc;
$colorSecondaryDark: #440b37;
$colorSecondaryAlpha: rgba(68, 11, 55, 0.7);
$colorAccent: #2c1b2f;
$colorAccentHighlight: #421f32;
$colorAccentDark: #341a2a;
$colorAccentInverted: #345dff;

/* Info Colors */
$colorInfoProfit: #41a4a9;
$colorInfoLoss: #f96363;
$colorInfoWarning: #c83333;
$colorInfoVoteAgainst: #eb9e49;

/* Token Colors */
$colorTokenMARS: #a03b45;
$colorTokenOSMO: #9f1ab9;
$colorTokenATOM: #6f7390;
$colorTokenAXL: #ffffff;
$colorTokenUSDC: #478edc;
$colorTokenJUNO: black;
$colorTokenStATOM: #e50571;
$colorTokenWBTC: #f09242;
$colorTokenWETH: #343434;

$colorGradientOSMO: linear-gradient(to bottom, #3a02e2, #e700ca);
$colorGradientATOM: linear-gradient(to bottom, #2e3148, #6f7390);
$colorGradientJUNO: linear-gradient(to bottom, #000000, #333333);
$colorGradientAXL: linear-gradient(to bottom, #ffffff, #999999);
$colorGradientAxlUSDC: linear-gradient(to bottom, #1f5c9e, #478edc);
$colorGradientAxlWBTC: linear-gradient(to bottom, #f09242, #f9d3b3);
$colorGradientAxlWETH: linear-gradient(to bottom, #343434, #8c8c8c);
$colorGradientStATOM: linear-gradient(to bottom, #e50571, #fb5da9);

/* Alpha Colors */
$alphaWhite10: rgba(255, 255, 255, 0.1);
$alphaWhite20: rgba(255, 255, 255, 0.2);
$alphaWhite30: rgba(255, 255, 255, 0.3);
$alphaWhite40: rgba(255, 255, 255, 0.4);
$alphaWhite50: rgba(255, 255, 255, 0.5);
$alphaWhite60: rgba(255, 255, 255, 0.6);
$alphaWhite70: rgba(255, 255, 255, 0.7);
$alphaWhite80: rgba(255, 255, 255, 0.8);
$alphaWhite90: rgba(255, 255, 255, 0.9);
$alphaBlack10: rgba(0, 0, 0, 0.1);
$alphaBlack20: rgba(0, 0, 0, 0.2);
$alphaBlack30: rgba(0, 0, 0, 0.3);
$alphaBlack40: rgba(0, 0, 0, 0.4);
$alphaBlack50: rgba(0, 0, 0, 0.5);
$alphaBlack60: rgba(0, 0, 0, 0.6);
$alphaBlack70: rgba(0, 0, 0, 0.7);
$alphaBlack80: rgba(0, 0, 0, 0.8);
$alphaBlack90: rgba(0, 0, 0, 0.9);

/* Background Colors */
$backgroundBody: #562a3b;
$backgroundBodyDark: #141621;
$backgroundInTile: $alphaBlack30;
$backgroundFooter: $alphaBlack20;

/* Slider Colors */
$sliderThumb: $colorWhite;
$sliderMark: $colorGreyLight;

/* Tooltip Colors */
$tooltipIconColor: $alphaWhite20;
$tableSort: $alphaWhite20;
$tableSortActive: $colorWhite;
$tableHeader: $alphaWhite50;

/* Table Colors */
$tableBorder: $alphaWhite10;
$tableBorderEnd: $alphaWhite80;
$tableSort: $alphaWhite20;
$tableSortActive: $colorWhite;
$tableHeader: $alphaWhite40;
$tableLabel: $alphaWhite60;

/* Graph Colors */
$graphLiquidationsLine: $alphaWhite70;
$graphAxis: $alphaWhite40;

/* Shadows */
$shadowInset: inset 0px 2px 2px rgba(0, 0, 0, 0.25);

@mixin shadowFade {
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 40%);
}

/* Devider */
@mixin devider10 {
  border-bottom: 1px solid $alphaWhite10;
}

@mixin devider20 {
  border-bottom: 1px solid $alphaWhite20;
}

@mixin devider40 {
  border-bottom: 1px solid $alphaWhite40;
}

@mixin devider60 {
  border-bottom: 1px solid $alphaWhite60;
}

/* Backgrounds */
@mixin bgBody {
  background-color: $backgroundBody;
  background-size: 100% auto;
  background-image: url('../images/bg.svg');
  background-position: center top;
}

@mixin bgBodyDark {
  background-color: $backgroundBodyDark;
}

@mixin bgTableHover {
  background-color: rgba($colorPrimary, 0.2);
}

@mixin bgProposalActive {
  background: linear-gradient(90deg, #10aa93 2.6%, #248aa9 97.92%);
}

@mixin bgProposalHover {
  background-color: #05252f;
}

@mixin bgTile($deg: 99.79) {
  background: linear-gradient(
    #{$deg}deg,
    rgba(8, 11, 30, 0.79) 8.17%,
    rgba(52, 20, 33, 0.9) 94.54%
  );
}

@mixin bgInTile {
  background: $alphaBlack30;
}

@mixin bgOverlay {
  background-color: rgba(0, 0, 0, 0.3);
}

@mixin bgTooltip {
  background: linear-gradient(77.47deg, rgba(20, 24, 57, 0.9) 11.58%, rgba(34, 16, 57, 0.9) 93.89%);
}

@mixin bgPopover {
  background: linear-gradient(180deg, #fef4ed -2.1%, #ecdbe0 97.53%);
  color: $fontColorDarkPrimary;
}

@mixin bgTileDevider {
  background-color: $alphaWhite60;
}

@mixin bgDevider {
  background-color: $alphaWhite20;
}

@mixin bgInput {
  background-color: #282a33;
}

@mixin bgPrimary {
  background-color: $colorPrimary;
}

@mixin bgSecondary {
  background-color: $colorSecondary;
}

@mixin bgTertiary {
  background-color: rgba(82, 75, 177, 0.5);
}

@mixin bgLimit {
  background: linear-gradient(
    to right,
    #15bfa9 20.9%,
    #5e4bb1 49.68%,
    #382685 82.55%,
    #c83333 100%
  );
}

@mixin bgLimitOpacity {
  background: linear-gradient(
    to right,
    #15bfa830 20.9%,
    #5e4bb130 49.68%,
    #38268530 82.55%,
    #c8333330 100%
  );
}

@mixin bgHatched {
  background-image: linear-gradient(
    135deg,
    transparent 33.33%,
    #826d6b 33.33%,
    #826d6b 50%,
    transparent 50%,
    transparent 83.33%,
    #826d6b 83.33%,
    #826d6b 100%
  );
  background-size: 5px 5px;
}

/* GLOWS */
@mixin glowXS {
  filter: blur(1px);
}
@mixin glowS {
  filter: blur(3px);
}
@mixin glowM {
  filter: blur(4px);
}
@mixin glowL {
  filter: blur(5px);
}
@mixin glowXL {
  filter: blur(8px);
}
@mixin glowXXL {
  filter: blur(24px);
}

/* Typography */
$fontWeightLight: 300;
$fontWeightRegular: 400;
$fontWeightSemibold: 600;

$fontColorDarkPrimary: $colorSecondaryDark;
$fontColorDarkSecondary: rgba(68, 8, 55, 0.7);
$fontColorLightPrimary: $colorWhite;
$fontColorLightSecondary: $alphaWhite60;
$fontColorLightTertiary: rgba(255, 255, 255, 0.4);
$fontColorLtv: $colorWhite;

@mixin typoH1 {
  font-weight: $fontWeightLight;
  font-size: rem-calc(60.84);
  line-height: space(20);
}

@mixin typoH2 {
  font-size: rem-calc(38.49);
  line-height: space(14);
}

@mixin typoH2caps {
  @include typoH2;
  text-transform: uppercase;
  letter-spacing: rem-calc(9);
}

@mixin typoH3 {
  font-size: rem-calc(30.42);
  line-height: space(10);
}

@mixin typoH3caps {
  font-size: rem-calc(30.42);
  line-height: space(10);
  text-transform: uppercase;
}

@mixin typoH4 {
  font-size: rem-calc(24.03);
  line-height: space(9);
  font-weight: $fontWeightRegular;
}

@mixin typoH4caps {
  @include typoH4;
  text-transform: uppercase;
  letter-spacing: rem-calc(3);
}

@mixin typoXXL {
  font-size: rem-calc(21.36);
  line-height: space(8);
}

@mixin typoXXLcaps {
  @include typoXXL;
  font-weight: $fontWeightRegular;
  text-transform: uppercase;
  letter-spacing: rem-calc(3);
}

@mixin typoXL {
  font-size: rem-calc(18.98);
  line-height: space(7);
}

@mixin typoXLcaps {
  @include typoXL;
  letter-spacing: rem-calc(5);
  text-transform: uppercase;
  font-weight: $fontWeightLight;
}

@mixin typoL {
  font-size: rem-calc(16.88);
  line-height: space(6);
}

@mixin typoLcaps {
  @include typoL;
  font-weight: $fontWeightSemibold;
  text-transform: uppercase;
  letter-spacing: rem-calc(3);
}

@mixin typoM {
  font-size: rem-calc(15);
  line-height: space(5);
}

@mixin typoMcaps {
  @include typoM;
  text-transform: uppercase;
}

@mixin typoS {
  font-size: rem-calc(13.33);
  line-height: space(5);
}

@mixin typoScaps {
  @include typoS;
  font-weight: $fontWeightSemibold;
  text-transform: uppercase;
  letter-spacing: rem-calc(3);
}

@mixin typoXS {
  font-size: rem-calc(11.85);
  line-height: space(4);
}

@mixin typoXScaps {
  @include typoXS;
  font-weight: $fontWeightSemibold;
  text-transform: uppercase;
  letter-spacing: rem-calc(3);
}

@mixin typoXXS {
  font-size: rem-calc(10.53);
  line-height: space(4);
}

@mixin typoXXScaps {
  @include typoXXS;
  font-weight: $fontWeightSemibold;
  text-transform: uppercase;
  letter-spacing: rem-calc(2);
}

@mixin typoXXXS {
  font-size: rem-calc(9.36);
  line-height: space(2);
}

@mixin typoXXXScaps {
  @include typoXXXS;
  font-weight: $fontWeightSemibold;
  text-transform: uppercase;
  letter-spacing: rem-calc(2);
}

@mixin typoButton {
  font-family: Inter, sans-serif;
  @include typoS;
  font-weight: $fontWeightSemibold;
}

@mixin typoNav {
  @include typoL;
  text-transform: uppercase;
  letter-spacing: rem-calc(5);
}

@mixin typoNetwork {
  font-size: rem-calc(10.53);
  font-weight: $fontWeightSemibold;
}

/* Spacing */
$spacingBase: 4;

@function space($multiplier) {
  $space: rem-calc($spacingBase * $multiplier);
  @return $space;
}

@mixin padding($top: 1, $right: null, $bottom: null, $left: null) {
  @if $left {
    padding: space($top) space($right) space($bottom) space($left);
  } @else {
    @if $bottom {
      padding: space($top) space($right) space($bottom);
    } @else {
      @if $right {
        padding: space($top) space($right);
      } @else {
        padding: space($top);
      }
    }
  }
}

@mixin margin($top: 1, $right: null, $bottom: null, $left: null) {
  @if $left {
    margin: space($top) space($right) space($bottom) space($left);
  } @else {
    @if $bottom {
      margin: space($top) space($right) space($bottom);
    } @else {
      @if $right {
        margin: space($top) space($right);
      } @else {
        margin: space($top);
      }
    }
  }
}

@function strip-unit($num) {
  @return math.div($num, $num * 0 + 1);
}

@function convert-to-rem($value, $base-value: $rem-base) {
  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
  @if ($value == 0rem) {
    $value: 0;
  }
  @return $value;
}

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);
  @if $max == 1 {
    @return convert-to-rem(nth($values, 1), $base-value);
  }
  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

/* LAYOUTS */
@mixin layoutTile {
  @include bgTile;
  border: rem-calc(7) solid $colorAccentHighlight;
  border-radius: $borderRadiusXL;
  height: fit-content;
}

@mixin layoutTooltip {
  @include padding(2, 4);
  @include bgTooltip;
  @include typoS;
  box-shadow: 0 rem-calc(3) rem-calc(4) rgba(0, 0, 0, 0.14),
    0 rem-calc(3) rem-calc(3) rgba(0, 0, 0, 0.12), 0 rem-calc(1) rem-calc(8) rgba(0, 0, 0, 0.2);
  border-radius: $borderRadiusL;
  max-width: rem-calc(350);
}

@mixin layoutPopover {
  @include bgPopover;
  box-shadow: 0 rem-calc(2) rem-calc(2) rgba(0, 0, 0, 0.14),
    0 rem-calc(1) rem-calc(5) rgba(0, 0, 0, 0.2);
  border-radius: $borderRadiusL;
}

@mixin layoutIncentiveButton {
  --border-width: 3px;
  background-color: #946582;
  position: relative;
  border: none;
  margin: rem-calc(3) rem-calc(11) 0 0;
  height: rem-calc(28);

  &:hover {
    border: none;
    background-color: darken(#946582, 10%);
  }

  &::after {
    border-radius: $borderRadiusXXL;
    position: absolute;
    content: '';
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      90deg,
      rgba(105, 98, 204, 0.8) 0%,
      rgba(105, 98, 204, 1) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(105, 98, 204, 1) 60%,
      rgba(105, 98, 204, 0.8) 100%
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    animation: moveGradient 6s alternate infinite;
  }
}

@mixin layoutLogo {
  > svg {
    width: rem-calc(50);
    height: rem-calc(50);
  }
}

@mixin layoutGlobal {
}

/* Buttons */
$buttonBorder: $alphaWhite40;
$buttonBorderHover: $colorWhite;

@mixin buttonS {
  @include typoS;
  @include padding(1.5, 5);
  min-height: rem-calc(32);
}

@mixin buttonM {
  @include typoM;
  @include padding(2.5, 6);
  min-height: rem-calc(40);
}

@mixin buttonL {
  @include typoL;
  @include padding(2.5, 6);
  min-height: rem-calc(56);
}

@mixin buttonSolidPrimary {
  &.primary {
    background-color: $colorPrimary;

    &:hover,
    &:focus {
      background-color: $colorPrimaryHighlight;
    }

    &:active {
      background-color: lighten($colorPrimary, 10%);
    }
  }
}

@mixin buttonSolidSecondary {
  &.secondary {
    background-color: $colorSecondary;

    &:hover,
    &:focus {
      background-color: $colorSecondaryHighlight;
    }

    &:active {
      background-color: lighten($colorSecondary, 10%);
    }
  }
}

@mixin buttonSolidTertiary {
  &.tertiary {
    background-color: $colorSecondaryAlpha;
    border: 1px solid $alphaWhite60;

    &:hover,
    &:focus {
      border: 1px solid $fontColorLightPrimary;
      background-color: $colorSecondaryDark;
    }

    &:active {
      border: 1px solid $fontColorLightPrimary;
      background-color: lighten($colorSecondaryDark, 10%);
    }
  }
}

/* Border Radius */
$borderRadiusXXXS: rem-calc(3);
$borderRadiusXXS: rem-calc(4);
$borderRadiusXS: rem-calc(5);
$borderRadiusS: rem-calc(8);
$borderRadiusM: rem-calc(9);
$borderRadiusL: rem-calc(12);
$borderRadiusXL: rem-calc(16);
$borderRadiusXXL: rem-calc(20);
$borderRadiusXXXL: rem-calc(30);
$borderRadiusXXXXL: rem-calc(100);
$borderRadiusRound: 50%;

/* Dimensions */
$headerHeight: rem-calc(86);
$mobileNavHeight: rem-calc(64);
$footerHeight: rem-calc(300);
$footerHeightMedium: rem-calc(300);
$footerHeightSmall: rem-calc(800);
$contentWidth: 1248px;

/* Breakpoints */
$bpLargeHigh: $contentWidth;
$bpLargeLow: 1025px;
$bpMediumHigh: 1024px;
$bpMediumLow: 801px;
$bpSmallHigh: 800px;
$bpXSmallHigh: 719px;
$bpXSmallLow: 480px;

/* Animation Timings */
$animationSpeed: 1s;
