@use '_root';

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT WEIGHT                                                                   │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

$fontWeight: (400, 500, 600, 700, 'normal');

//
// Generate possible Font Weights
//

@each $w in $fontWeight
{
  .w-#{$w}
  {
    font-weight: $w;
  }
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT SIZE                                                                     │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

$fontSize: 50;

//
// Generate possible Font Sizes
//

@for $i from 1 through $count
{
  .s-#{$i},
  .global.s-#{$i},
  .global.s-#{$i} > *
  {
    font-size: #{$i}px;
  }
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 LEGACY                                                                        │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

.global.color-grey > *
{
  color: var(--grey) !important;
}

.x-large,
p.x-large,
span.x-large
{
  font-size: 18px;
}

.large,
p.large,
span.large
{
  font-size: 16px;
}

.medium,
p.medium,
span.medium
{
  font-size: 14px;
}

.small,
p.small
{
  font-size: 12px;
}

.s_small,
p.s_small
{
  font-size: 12px;
}

@media only screen and (min-width: 768px)
{
  .s-t-16
  {
    font-size: 16px;
  }
  .large,
  p.large,
  span.large
  {
    font-size: 18px;
  }
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 HEADINGS                                                                      │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

@mixin defaultHeader
{
  /* 🎨 style */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}

@for $i from 1 through 6
{
  h#{$i}
  {
    @include defaultHeader;
    font-weight: 700;
    line-height: 140%;

    @if $i == 1
    {
      font-size: 32px;
    }
    @else if $i == 2
    {
      font-size: 20px;
    }
    @else if $i == 3
    {
      font-size: 18px;
    }
    @else if $i == 4
    {
      font-size: 14px;
    }
  }
}

.global.lh-125 > *
{
  /* 🎨 style */
  line-height: 125%;
}

.global.lh-128 > *
{
  /* 🎨 style */
  line-height: 128.571%;
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT COLORS                                                                   │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

@each $key, $data in $root-color-map
{
  .#{map-get($data, "class-name")}
  {
    /* 🎨 style */
    color: var(#{map-get($data, "root-name")}) !important;

    @each $key-dark, $data-dark in map-get($data, "dark-mirror")
    {
      .dark-background &
      , .dark-background-1 &
      , .dark-mode &
      {
        &#{map-get($data-dark, "class-name")}
        {
          /* 🔥 override */
          /* 🎨 style */
          color: var(#{map-get($data-dark, "root-name")}) !important;
        }
      }
    }
  }
}

.color-blue-green-gradient
{
  /* 🎨 style */
  background: -webkit-linear-gradient rgb(0, 255, 117), rgb(0, 163, 255);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hover-color-primary:hover
{
  /* 🎨 style */
  color: var(--primary) !important;
}

/*
╭──────────────────────────────────────────────────────────────────────────────────╮
│ 📌 FONT EXTRA STYLES                                                             │
╰──────────────────────────────────────────────────────────────────────────────────╯
*/

.no-wrap
{
  white-space: nowrap;
}

.underline
{
  text-decoration: underline !important;
}

.bold
{
  font-style: normal;
  font-weight: bold;
}

.not-bold
{
  font-weight: normal;
}

.lowercase
{
  text-transform: lowercase;
}

.uppercase
{
  text-transform: uppercase;
}

.capitalize
{
  text-transform: capitalize;
}

.text-center
{
  text-align: center;
  text-align: -webkit-center;
  text-align: -moz-center;
}

.text-left
{
  text-align: left;
  text-align: -webkit-left;
  text-align: -moz-left;
}

.text-right
{
  text-align: right;
  text-align: -webkit-right;
  text-align: -moz-right;
}

.place-center
{
  place-self: center;
}

.cursor-pointer
{
  cursor: pointer;
}

.cursor-not-allowed
{
  cursor: not-allowed !important;
}

.display-none
{
  display: none !important;
}

.display-unset
{
  display: unset !important;
}

.visibility-none
{
  visibility: hidden;
}

.opacity-0-4
{
  opacity: 0.4;
}