//-------------------------------
// BREAKPOINTS
//-------------------------------
$breakpoints: (
  'mobile': 320px,
  'tablet': 640px,
  'desktop': 960px,
  'desktop-large': 1280px,
  'desktop-xlarge': 1440px,
  'desktop-2xlarge': 1600px,
);

@mixin media($breakpoint) {
  $breakpoint-value: map-get($breakpoints, $breakpoint);
  @if $breakpoint-value {
    @media (max-width: $breakpoint-value) {
      @content;
    }
  } @else {
    @warn "No breakpoint key '#{$breakpoint}' found in breakpoints map.";
  }
}

@mixin container($breakpoint) {
  $width-value: map-get($breakpoints, $breakpoint);
  @if $width-value {
    width: $width-value;
  } @else {
    @warn "No breakpoint key '#{$breakpoint}' found in breakpoints map.";
  }
}

//-------------------------------
// FONTS = Families
//-------------------------------
$font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

//-------------------------------
// FONTS = Sizes
//-------------------------------
$font-sizes: (
  'xsmall': 12px,
  'small': 14px,
  'medium': 16px,
  'large': 22px,
  'xlarge': 28px,
  '2xlarge': 34px,
  '3xlarge': 48px,
  '4xlarge': 60px,
);

@mixin font-size($size-key) {
  $size-value: map-get($font-sizes, $size-key);
  @if $size-value {
    font-size: $size-value;
  } @else {
    @warn "No size key '#{$size-key}' found in font sizes map.";
  }
}

@each $size-key, $size-value in $font-sizes {
  .font-size--#{$size-key} {
    @include font-size($size-key);
  }
}

//-------------------------------
// FONTS = Weights
//-------------------------------
$font-weights: (
  'light': 200,
  'regular': 400,
  'medium': 500,
  'semibold': 600,
  'bold': 800,
);

@mixin font-weight($weight-key) {
  $weight-value: map-get($font-weights, $weight-key);
  @if $weight-value {
    font-weight: $weight-value;
  } @else {
    @warn "No weight key '#{$weight-key}' found in font weights map.";
  }
}

@each $weight-key, $weight-value in $font-weights {
  .font-weight--#{$weight-key} {
    @include font-weight($weight-key);
  }
}

//-------------------------------
// COLORS
//-------------------------------
$colors: (
  'text': (
    'lightest': #ccdff3fb,
    'lighter': #93c5fdcc,
    'base': #93c5fd99,
  ),
  'neutral': (
    'white': #fff,
    'black': #000,
    'transparent': transparent,
  ),
  'blue': (
    'lighter': lighten(#1d40b0, 40%),
    'light': lighten(#1d40b0, 20%),
    'base': #1d40b0,
    'dark': #1b3561,
    'darker': #0b183a,
  ),
  'red': (
    'lighter': #ffc2be,
    'light': #e84a49,
    'base': #c03230,
    'dark': #8a1c1b,
    'darker': #460a0997,
  ),
  'yellow': (
    'lighter': #ffffe0,
    'light': #ffff00,
    'base': #ffd700,
    'dark': #ff8c00,
    'darker': #ff4500,
  ),
  'green': (
    'lighter': #90ee90,
    'light': #32cd32,
    'base': #008000,
    'dark': #006400,
    'darker': #002800,
  ),
);

@mixin color($color, $tone: 'base', $property: 'color') {
  $color-map: map-get($colors, $color);
  @if $color-map {
    $tone-value: map-get($color-map, $tone);
    @if $tone-value {
      #{$property}: $tone-value;
    } @else {
      @warn "No tone '#{$tone}' found in color map for '#{$color}'";
    }
  } @else {
    @warn "No color '#{$color}' found in colors map.";
  }
}

@each $color, $tones in $colors {
  @each $tone, $value in $tones {
    .bg--#{$color}-#{$tone} {
      background-color: $value;
    }
    .text--#{$color}-#{$tone} {
      color: $value;
    }
  }
}

//-------------------------------
// SPACING UNITS
//-------------------------------
$spacing-units: (
  'auto': auto,
  'none': 0,
  'xsmall': 4px,
  'small': 8px,
  'medium': 16px,
  'base': 24px,
  'large': 32px,
  'xlarge': 64px,
  '2xlarge': 128px,
  '3xlarge': 256px,
  '4xlarge': 512px,
);

$directions: (
  'padding': (
    'left',
    'right',
    'top',
    'bottom',
  ),
  'margin': (
    'left',
    'right',
    'top',
    'bottom',
  ),
);

@mixin spacing($property, $values...) {
  $result: ();
  @each $value in $values {
    $result: append($result, map-get($spacing-units, $value), space);
  }
  #{$property}: $result;
}

@each $space, $directions in $directions {
  @each $dir in $directions {
    @each $size, $value in $spacing-units {
      .#{$space}-#{$dir}--#{$size} {
        #{if($dir == 'all', $space, $space + '-' + $dir)}: $value;
      }
    }
  }
}

//-------------------------------
// WIDTH
//-------------------------------
$sizes: (
  0,
  05,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  55,
  60,
  65,
  70,
  75,
  80,
  85,
  90,
  95,
  100,
  33,
  49
);

@mixin width($size) {
  width: unquote($size + '%');
}

@mixin gap($size) {
  gap: unquote($size + 'px');
}

@each $size in $sizes {
  .width--#{$size} {
    @include width($size);
  }
}

@each $size in $sizes {
  .gap--#{$size}--mobile {
    @include media(mobile) {
      @include gap($size);
    }
  }
}

@each $size in $sizes {
  .gap--#{$size}--tablet {
    @include media(tablet) {
      @include gap($size);
    }
  }
}

//-------------------------------
// BORDER RADIUS = Sizes
//-------------------------------
$border-radius: (
  'xsmall': 4px,
  'small': 8px,
  'medium': 12px,
  'base': 20px,
  'pill': 100px,
  'circle': 100%,
);

@mixin border-radius($size-key) {
  $size-value: map-get($border-radius, $size-key);
  @if $size-value {
    border-radius: $size-value;
  } @else {
    @warn "No size key '#{$size-key}' found in border radius map.";
  }
}

@each $size-key, $size-value in $border-radius {
  .border-radius--#{$size-key} {
    @include border-radius($size-key);
  }
}

//-------------------------------
// HTML & BODY
//-------------------------------
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: $font-primary;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #040609;
  background-image: linear-gradient(
    0deg,
    #040609,
    #040609 10%,
    #050e1d 90%,
    #050e1d
  );
  margin: 0;
  @include color('text', 'base', 'color');
}

//-------------------------------
// Images
//-------------------------------
img {
  vertical-align: middle;
}

//-------------------------------
// IMAGES = FILTERS
//-------------------------------
.image--invert {
  filter: invert(1);
}

//-------------------------------
// TYPOGRAPHY
//-------------------------------
h1,
h2,
h3,
h4,
h5,
h6 {
  @include spacing('margin', 'none');
  font-weight: normal;
  line-height: 1.5;
  @include media(tablet) {
    line-height: 1.3;
  }
}

p,
label {
  @include spacing('margin', 'none');
  font-weight: normal;
  line-height: 1.5;
}

h1 {
  @include font-size('4xlarge');
  @include media(tablet) {
    @include font-size('3xlarge');
  }
}
h2 {
  @include font-size('3xlarge');
  @include media(tablet) {
    @include font-size('2xlarge');
  }
}
h3 {
  @include font-size('2xlarge');
  @include media(tablet) {
    @include font-size('large');
  }
}
h4 {
  @include font-size('xlarge');
  @include media(tablet) {
    @include font-size('large');
  }
}
h5 {
  @include font-size('large');
  @include media(tablet) {
    @include font-size('large');
  }
}
h6 {
  @include font-size('medium');
  @include media(tablet) {
    @include font-size('medium');
  }
}

br {
  @include media(tablet) {
    display: none;
  }
}

ul {
  list-style-type: none;
  @include spacing('margin', 'none');
  @include spacing('padding', 'none');
}

code {
  font-family: monospace;
  word-break: break-all;
  @include border-radius('base');
  @include spacing('padding-left', 'medium');
  @include spacing('padding-right', 'medium');
  @include spacing('padding-top', 'xsmall');
  @include spacing('padding-bottom', 'xsmall');
  @include color('blue', 'lighter', 'color');
  @include color('blue', 'dark', 'background');
  @include font-size('small');
  &:hover {
    @include color('neutral', 'white', 'color');
  }
}

//-------------------------------
// LINKS = Styles
//-------------------------------
a,
.link--primary {
  @include color('text', 'lighter', 'color');
  text-decoration: underline;
  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}

.link--secondary {
  @include color('blue', 'light', 'color');
  text-decoration: underline;
  &:hover {
    @include color('blue', 'base', 'color');
    cursor: pointer;
    text-decoration: underline;
  }
}
//-------------------------------
// BUTTONS = Styles
//-------------------------------
%button {
  border: 0;
  width: 100%;
  @include border-radius('pill');
  &:hover {
    cursor: pointer;
  }
}
.button--link {
  display: block;
  text-align: center;
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
}

.button--icon {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.button--primary {
  @extend %button;
  @include color('blue', 'base', 'background-color');
  @include color('neutral', 'white', 'color');
  &:hover {
    @include color('blue', 'dark', 'background-color');
  }
}
.button--primary--outline {
  @extend %button;
  border: 1px solid;
  @include color('blue', 'dark', 'border-color');
  @include color('neutral', 'transparent', 'background-color');
  @include color('text', 'lighter', 'color');
  &:hover {
    @include color('neutral', 'white', 'color');
    @include color('blue', 'darker', 'background-color');
  }
}

.button--secondary {
  @extend %button;
  @include color('blue', 'darker', 'background-color');
  @include color('neutral', 'white', 'color');
  &:hover {
    @include color('blue', 'base', 'background-color');
  }
}
.button--secondary--outline {
  @extend %button;
  border: 1px solid;
  @include color('blue', 'darker', 'border-color');
  @include color('neutral', 'transparent', 'background-color');
  @include color('blue', 'darker', 'color');
  &:hover {
    @include color('blue', 'darker', 'background-color');
    @include color('neutral', 'white', 'color');
  }
}
.button--red {
  @extend %button;
  @include color('red', 'base', 'background-color');
  @include color('neutral', 'white', 'color');
  &:hover {
    @include color('red', 'darker', 'background-color');
  }
}
.button--red--outline {
  @extend %button;
  border: 1px solid;
  @include color('red', 'dark', 'border-color');
  @include color('neutral', 'transparent', 'background-color');
  @include color('text', 'lighter', 'color');
  &:hover {
    @include color('red', 'darker', 'background-color');
  }
}

.button--disabled {
  @extend %button;
  @include color('blue', 'dark', 'background-color');
  @include color('blue', 'lighter', 'color');
  opacity: 0.4;
  &:hover {
    @include color('blue', 'base', 'background-color');
    cursor: not-allowed;
  }
}

//-------------------------------
// BUTTONS = Sizes
//-------------------------------
.button--xsmall {
  @include font-size('xsmall');
  @include spacing('padding-top', 'xsmall');
  @include spacing('padding-bottom', 'xsmall');
  @include spacing('padding-left', 'medium');
  @include spacing('padding-right', 'medium');
}
.button--small {
  @include font-size('small');
  @include spacing('padding-top', 'small');
  @include spacing('padding-bottom', 'small');
  @include spacing('padding-left', 'medium');
  @include spacing('padding-right', 'medium');
}
.button--medium {
  @include font-size('medium');
  @include spacing('padding', 'medium');
}

//-------------------------------
// DISPLAY
//-------------------------------
.display--inline-block {
  display: inline-block;
}
.display--flex {
  display: flex;
}
.display--block {
  display: block;
}

//-------------------------------
// FLEXBOX STUFF
//-------------------------------
.justify--start {
  justify-content: start;
}
.justify--between {
  justify-content: space-between;
}
.justify--end {
  justify-content: end;
}
.justify--center {
  justify-content: center;
}
.items--start {
  align-items: start;
}
.items--center {
  align-items: center;
}
.items--end {
  align-items: end;
}
.flex--column {
  flex-direction: column;
}
.flex--row {
  flex-direction: row;
}
.flex--column-reverse {
  flex-direction: column-reverse;
}
.flex--row-reverse {
  flex-direction: row-reverse;
}
.flex--column--tablet {
  @include media(tablet) {
    flex-direction: column;
  }
}
.flex--row--tablet {
  @include media(tablet) {
    flex-direction: row;
  }
}
.flex--column-reverse--tablet {
  @include media(tablet) {
    flex-direction: column-reverse;
  }
}
.flex--row-reverse--tablet {
  @include media(tablet) {
    flex-direction: row-reverse;
  }
}

//-------------------------------
// POSITION
//-------------------------------
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

//-------------------------------
// LAYOUT
//-------------------------------
.container {
  margin: 0 auto;
  @include spacing('padding-left', 'large');
  @include spacing('padding-right', 'large');
  @include container(tablet);

  @include media(tablet) {
    min-width: 100%;
    width: 100%;
  }
  @include media(mobile) {
    max-width: 100%;
    width: 100%;
  }
}
.container--scrollbar {
  overflow-x: hidden !important;
}
.container--scrollbar::-webkit-scrollbar {
  width: 0.3rem;
}
.container--scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.container--scrollbar::-webkit-scrollbar-thumb {
  background: rgba(254, 208, 0, 1);
  border: 1px solid transparent;
  border-radius: 4px;
}

.full-screen {
  height: 100%;
  width: 100%;
}

//-------------------------------
// BOX
//-------------------------------
.box--rounded {
  @include border-radius('base');
}
.box--border {
  border: 1px solid;
  @include color('blue', 'dark', 'border-color');
  @include border-radius('base');
}
.box--small {
  @include spacing('padding', 'small');
}
.box--base {
  @include spacing('padding', 'base');
}
.box--medium {
  @include spacing('padding', 'medium');
}
.box--large {
  @include spacing('padding', 'large');
}

//-------------------------------
// SECTION = Header
//-------------------------------
.section--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid;
  @include color('blue', 'dark', 'border-color');
  @include spacing('padding', 'medium');
  @include spacing('margin-bottom', 'xlarge');
  @include media(tablet) {
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
  }
}
.section--header__left {
  display: flex;
  align-items: center;

  .section--header__logo {
    width: 80px;
    height: auto;
    @include spacing('margin-right', 'small');
  }
}
.section--header__right {
  display: flex;
  align-items: center;
  @include spacing('gap', 'small');

  .section--header__verify {
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    @include border-radius('pill');
    @include font-size('small');
    @include spacing('padding-left', 'medium');
    @include spacing('padding-right', 'medium');
    @include spacing('padding-top', 'small');
    @include spacing('padding-bottom', 'small');
    @include color('green', 'lighter', 'color');
    @include color('green', 'darker', 'background-color');
  }

  @include media(tablet) {
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    @include spacing('margin-top', 'base');
  }
}
//-------------------------------
// SECTION = Login Options
//-------------------------------
.section--login {
  width: 100%;
  margin: 0 auto;
}
.section--login__common {
  @include spacing('margin-bottom', 'medium');
}
.section--login__advanced {
  @include color('blue', 'dark', 'border-color');
}
//-------------------------------
// SECTION = Login Options
//-------------------------------
.section--verify {
  width: 100%;
  margin: 0 auto;
}
.section--verify__option {
  @include spacing('padding', 'large');
  @include color('neutral', 'black', 'color');
  @include color('neutral', 'white', 'background-color');
  @include border-radius('base');
}
.section--verify__advanced {
  @include color('blue', 'dark', 'border-color');
}
//-------------------------------
// SECTION = Logged-In Accounts
//-------------------------------
.section--accounts {
  width: 100%;
  text-align: left;
  @include border-radius('base');
}
.section--accounts__illustration {
  margin-bottom: 20px;
  position: relative;
  margin-top: -80px;
}
.section--accounts__header {
  text-align: center;
  @include font-weight('base');
  @include font-size('small');
}
.section--accounts__icon {
  height: 22px;
}
.section--accounts__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 245px;
  border: 1px solid;
  scroll-behavior: smooth;
  @include spacing('padding-top', 'small');
  @include color('blue', 'dark', 'border-color');
  @include border-radius('base');
}
.section--accounts__item {
  width: 100%;
  border: 1px solid;
  justify-content: space-between;
  display: flex;
  align-items: center;
  @include border-radius('pill');
  @include spacing('margin-left', 'medium');
  @include spacing('margin-right', 'base');
  @include spacing('padding-left', 'small');
  @include spacing('padding-right', 'medium');
  @include spacing('padding-top', 'small');
  @include spacing('padding-bottom', 'small');
  @include color('text', 'lighter', 'color');
  @include color('blue', 'darker', 'background-color');
  @include color('blue', 'dark', 'border-color');
  @include font-weight('medium');
  @include font-size('small');

  &:hover {
    @include color('text', 'lighter', 'border-color');
    cursor: pointer;
  }

  &--just-added {
    @include color('blue', 'light', 'border-color');
    @include color('blue', 'dark', 'background-color');
  }
}
.section--accounts__remove {
  border-radius: 99px;
  position: relative;
  width: 26px;
  height: 26px;
  @include color('blue', 'darker', 'background-color');
  @include spacing('right', 'medium');
  @include spacing('padding', 'xsmall');
  i-feather[name='power'] {
    @include color('text', 'base', 'color');
    width: 16px;
    height: 16px;
  }
  &:hover {
    @include color('red', 'dark', 'background-color');
    cursor: pointer;
    i-feather[name='power'] {
      @include color('red', 'lighter', 'color');
    }
  }
}
.section--accounts__recover {
  border: 1px solid;
  border-radius: 20px;
  @include color('blue', 'dark', 'border-color');
  @include spacing('padding', 'medium');
}
.section--accounts__recover--actions {
  display: flex;
  flex-direction: row;
  @include spacing('gap', 'small');
  @include media(mobile) {
    flex-direction: column;
  }
}
//-------------------------------
// SECTION = Sub Actions
//-------------------------------
.section--subactions {
  border-top: 1px solid;
  @include spacing('padding', 'medium');
  @include color('blue', 'dark', 'border-color');
  @include spacing('padding-top', 'medium');
  @include spacing('margin-top', 'small');
}
//-------------------------------
// SECTION = Create Seed Phrase
//-------------------------------
.section--seed {
  text-align: center;
}
.section--seed__container {
  width: 100%;
  height: 100%;
  @include color('text', 'base', 'color');
  @include color('neutral', 'white', 'background-color');
  @include border-radius('base');
  @include font-size('medium');
  @include spacing('padding', 'large');
}
.section--seed__phrase {
  text-align: left;
  @include font-size('medium');
  @include spacing('line-height', 'large');
  @include spacing('word-spacing', 'large');
  @include color('neutral', 'black', 'color');
}
.section--seed__actions {
  display: flex;
  align-items: center;
  @include spacing('gap', 'small');
  @include media(mobile) {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}
.section--seed__advanced {
  border-top: 1px solid;
  @include spacing('margin-top', 'large');
  @include spacing('padding-top', 'large');
  @include color('blue', 'dark', 'border-top-color');
}
//-------------------------------
// SECTION = Get Starter DeSo
//-------------------------------
.section--starter {
  text-align: center;
}
.section--starter__option {
  border: 1px solid;
  @include spacing('padding', 'large');
  @include color('blue', 'dark', 'border-color');
  @include border-radius('base');
}
.section--starter__option--captcha {
  border: 1px solid;
  @include spacing('padding', 'large');
  @include color('blue', 'dark', 'border-color');
  @include border-radius('base');
  @include media(mobile) {
    padding: 0;
    border-radius: none;
    border: none;
  }
}
//-------------------------------
// SECTION = Phone Page
//-------------------------------
.section--phone {
  text-align: center;
}
.section--phone__option {
  @include spacing('padding', 'large');
  @include color('neutral', 'black', 'color');
  @include color('neutral', 'white', 'background-color');
  @include border-radius('base');
}
//-------------------------------
// SECTION = Login Page
//-------------------------------
.section--login {
  text-align: center;
}
.section--login__option {
  border: 1px solid;
  @include spacing('padding', 'large');
  @include color('neutral', 'black', 'color');
  @include color('neutral', 'white', 'background-color');
  @include border-radius('base');
}
//-------------------------------
// SECTION = Access Level
//-------------------------------
.section--access__item {
  border-bottom: 1px solid;
  @include font-size('medium');
  @include spacing('padding', 'base');
  @include color('blue', 'dark', 'border-bottom-color');
  &:last-of-type {
    border-bottom: none;
  }
}
//-------------------------------
// FORMS = Input
//-------------------------------
.input--textarea {
  width: 100%;
  border: 1px solid;
  font-family: $font-primary;
  @include border-radius('small');
  @include font-size('medium');
  @include spacing('padding', 'medium');
  @include color('blue', 'dark', 'border-color');
}
.input--textarea--small {
  @include spacing('padding', 'small');
  @include font-size('small');
}
.input--phone {
  width: 100%;
  border: 1px solid;
  @include border-radius('small');
  @include font-size('medium');
  @include spacing('text-indent', 'medium');
  @include spacing('padding', 'medium');
  @include color('blue', 'dark', 'border-color');
}
.input--seed {
  line-height: 1.7;
  &::placeholder {
    @include spacing('word-spacing', 'none');
  }
  @include spacing('word-spacing', 'medium');
}
//---------------------------------------------
// FORMS = Input Overrides for Phone Number
//---------------------------------------------
.iti__selected-flag {
  margin-right: 10px !important;
}
.iti {
  width: 100% !important;
}
//-------------------------------
// AVATARS = Shapes
//-------------------------------
.avatar--rounded {
  @include border-radius('circle');
}
.avatar--medium {
  @include spacing('width', 'medium');
  @include spacing('height', 'medium');
}
.avatar--large {
  @include spacing('width', 'large');
  @include spacing('height', 'large');
}
.avatar--xlarge {
  @include spacing('width', 'xlarge');
  @include spacing('height', 'xlarge');
}
//-------------------------------
// TEXT = Styles
//-------------------------------
.text--divider {
  width: 100%;
  position: relative;
  text-align: center;
  &:after,
  &:before {
    content: '';
    border-bottom: 1px solid;
    width: 45%;
    height: 1px;
    top: 12px;
    position: absolute;
    opacity: 0.5;
    @include color('blue', 'light', 'border-color');
  }
  &:after {
    content: '';
    left: 0;
  }
  &:before {
    content: '';
    right: 0;
  }
}
.section--divider {
  width: 100%;
  position: relative;
  border-bottom: 1px solid;
  height: 1px;
  opacity: 0.5;
  @include color('blue', 'light', 'border-color');
  @include spacing('margin-top', 'base');
  @include spacing('margin-bottom', 'base');
}
.section--divider--small {
  width: 100%;
  position: relative;
  border-bottom: 1px solid;
  height: 1px;
  opacity: 0.5;
  @include color('blue', 'light', 'border-color');
  @include spacing('margin-top', 'small');
  @include spacing('margin-bottom', 'small');
}
.section--divider--medium {
  width: 100%;
  position: relative;
  border-bottom: 1px solid;
  height: 1px;
  opacity: 0.5;
  @include color('blue', 'light', 'border-color');
  @include spacing('margin-top', 'medium');
  @include spacing('margin-bottom', 'medium');
}
//-------------------------------
// TEXT = Alignment
//-------------------------------
.text--left {
  text-align: left;
}
.text--right {
  text-align: right;
}
.text--center {
  text-align: center;
}
//-------------------------------
// WARNING = ALERT BANNERS
//-------------------------------
.warning--error {
  text-align: center;
  line-height: 1.5;
  border: 1px solid;
  @include color('red', 'dark', 'border-color');
  @include border-radius('base');
  @include font-size('small');
  @include spacing('padding', 'small');
  @include color('red', 'darker', 'background-color');
  @include color('red', 'lighter', 'color');
}

.warning--error--medium {
  @include spacing('padding', 'medium');
}

//-------------------------------
// SECTION = HEROSWAP IFRAME
//-------------------------------
.section--heroswap__iframe {
  width: 100%;
  border: 0;
  height: 450px;
}

//-------------------------
// LOADING ICON
//-------------------------
.google-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.google-ball {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  margin: 0 10px;

  animation: 2s bounce ease infinite;
}

.google-ball.blue {
  background-color: #4285f5;
}

.google-ball.red {
  background-color: #ea4436;
  animation-delay: 0.25s;
}

.google-ball.yellow {
  background-color: #fbbd06;
  animation-delay: 0.5s;
}

.google-ball.green {
  background-color: #34a952;
  animation-delay: 0.75s;
}

//-------------------------
// Wallet Connect
//-------------------------
.walletconnect-qrcode__image,
.walletconnect-qrcode__text,
.walletconnect-modal__footer {
  display: none !important;
}

.walletconnect-modal__single_wallet {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

//-------------------------
// SPINNER
//-------------------------
@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spinner-border {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
  padding: 40px;
  margin: 40px;
}

//-------------------------
// Sweet Alerts
//-------------------------
.swal2-container {
  .swal2-icon {
    display: none !important;
  }
  .swal2-popup {
    @include spacing('padding-top', 'base');
    @include spacing('padding-bottom', 'base');
    @include spacing('padding-right', 'base');
    @include spacing('padding-left', 'base');
    @include color('blue', 'base', 'background-color');
  }
  .swal2-title {
    @include color('text', 'lightest', 'color');
    @include font-size('large');
  }
  .swal2-html-container {
    line-height: 1.5;
    @include color('text', 'lighter', 'color');
    @include font-size('medium');
  }
  .swal2-confirm {
    border: 1px solid;
    @include color('neutral', 'white', 'border-color');
    @include color('neutral', 'transparent', 'background-color');
    @include color('neutral', 'white', 'color');
  }
  &.swal2-backdrop-show {
    background-color: rgba(0, 0, 0, 0.8) !important;
  }
}
//-------------------------
// Material Dialog
//-------------------------
.mat-mdc-dialog-container .mdc-dialog__surface {
  background-color: transparent !important;
}
.cdk-overlay-pane {
  overflow-y: auto;
}
.cdk-overlay-dark-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px);
}
.dialog {
  border-radius: 20px;
  max-width: 600px;
  box-shadow: 0 0 10px black;
  @include color('blue', 'darker', 'background-color');
  @include spacing('padding', 'base');
}
.dialog__header {
  position: relative;
  @include color('neutral', 'white', 'color');
}
.dialog__x {
  border: none;
  background: none;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  @include color('text', 'base', 'color');
  &:hover {
    @include color('neutral', 'white', 'color');
  }
}
.dialog__title {
  @include font-size('large');
  @include color('neutral', 'white', 'color');
  @include font-weight('medium');
}
.dialog__body {
  padding: 12px 0;
}
//-------------------------
// Material Dialog
//-------------------------
