@use 'general';
// Color Palettes

// Basic
$black: #000;
$white: #fff;

// Neutral (Gray) Palette - 10 variants
$neutral-1: #f4f4f4;
$neutral-2: #e8e8e8;
$neutral-3: #d6d6d6;
$neutral-4: #c4c4c4;
$neutral-5: #b2b2b2;
$neutral-6: #8e8e8e;
$neutral-7: #6b6b6b;
$neutral-8: #595959;
$neutral-9: #474747;
$neutral-10: #353535;

// Extended Neutral Palette - 4 variants
$neutral-white-95: #FCFCFC;
$neutral-white-90: #FBFBFB;
$neutral-black-80: #2A2A2A;
$neutral-dark: #141414;

// Orange Palette - 7 variants
$orange-darkest: #ffd37c;
$orange-darker: #ffb637;
$orange-dark: #ffa201;
$orange-base: #fb9502;
$orange-light: #f68704;
$orange-lighter: #f27a06;
$orange-lightest: #ed6c07;

// Purple Palette - 7 variants
$purple-lightest: #ebcbff;
$purple-lighter: #dea7ff;
$purple-light: #d08bfa;
$purple-base: #b967ea;
$purple-dark: #8939b9;
$purple-darker: #7426a4;
$purple-darkest: #611491;

// Blue Palette - 6 variants
$blue-10: #EAF4FA;
$blue-20: #D5E9F6;
$blue-40: #ABD4EC;
$blue-60: #82BEE3;
$blue-80: #58A9D9;
$blue-100: #2E93D0;

// Extended Blue Palette - 2 variants
$blue-dark: #178cd3;
$blue-darker: #1488CE;

// Pink Palette - 6 variants
$pink-20: #FBD8E9;
$pink-40: #F7B0D4;
$pink-60: #F289BE;
$pink-70: #F075B3;
$pink-80: #EE61A9;
$pink-100: #ea3a93;

// Extended Pink Palette - 3 variants
$pink-light: #f64ea3;
$pink-dark: #ef248b;
$pink-darker: #d91578;

// Yellow Palette - 5 variants
$yellow-20: #FEFCD2;
$yellow-40: #FEF8A5;
$yellow-60: #FDF577;
$yellow-80: #FDF14A;
$yellow-100: #fcee1d;

// Extended Yellow Palette - 1 variant
$yellow-dark: #f6e709;

// Main color variables
$color-primary: #e6540f;
$color-alternative: #f9f8f7; //Background-buzios
$color-link: #1a79cb;

//$color-success: #28a745;
//$color-danger: #dc3545;
//$color-warning: $yellow-400;


// Utility functions
@function with-transparency($color, $alpha) {
    @return rgba($color, $alpha);
}

// Mixins
@mixin generate-color-classes($color-name, $color-value) {
  .#{general.$prefix}text-#{$color-name} {
    color: $color-value;
  }
  
  .#{general.$prefix}bg-#{$color-name} {
    background-color: $color-value;
  }
  
  .#{general.$prefix}border-#{$color-name} {
    border-color: $color-value;
  }
  
  .#{general.$prefix}hover-#{$color-name} {
    &:hover {
      color: $color-value;
    }
  }
  
  @each $opacity in (90, 80, 60, 40, 20) {
    .#{general.$prefix}bg-#{$color-name}-#{$opacity} {
      background-color: with-transparency($color-value, calc($opacity / 100));
    }
  }
}

// Generate classes for each shade of each color
@each $color-name, $shades in (
  'neutral': (1: $neutral-1, 2: $neutral-2, 3: $neutral-3, 4: $neutral-4, 5: $neutral-5, 6: $neutral-6, 7: $neutral-7, 8: $neutral-8, 9: $neutral-9, 10: $neutral-10, 'white-95': $neutral-white-95, 'white-90': $neutral-white-90, 'black-80': $neutral-black-80, 'dark': $neutral-dark),
  'orange': ('darkest': $orange-darkest, 'darker': $orange-darker, 'dark': $orange-dark, 'base': $orange-base, 'light': $orange-light, 'lighter': $orange-lighter, 'lightest': $orange-lightest),
  'purple': ('lightest': $purple-lightest, 'lighter': $purple-lighter, 'light': $purple-light, 'base': $purple-base, 'dark': $purple-dark, 'darker': $purple-darker, 'darkest': $purple-darkest),
  'blue': (10: $blue-10, 20: $blue-20, 40: $blue-40, 60: $blue-60, 80: $blue-80, 100: $blue-100, 'dark': $blue-dark, 'darker': $blue-darker),
  'pink': (20: $pink-20, 40: $pink-40, 60: $pink-60, 70: $pink-70, 80: $pink-80, 100: $pink-100, 'light': $pink-light, 'dark': $pink-dark, 'darker': $pink-darker),
  'yellow': (20: $yellow-20, 40: $yellow-40, 60: $yellow-60, 80: $yellow-80, 100: $yellow-100, 'dark': $yellow-dark)
) {
  @each $shade, $value in $shades {
    @include generate-color-classes('#{$color-name}-#{$shade}', $value);
  }
}

// Generate classes for main colors and basic colors
@each $color-name, $color-value in (
  'primary': $color-primary,
  'alternative': $color-alternative,
  'link': $color-link,
  'black': $black,
  'white': $white
) {
  @include generate-color-classes($color-name, $color-value);
}





// Gradients
.bz-bg-gradient-pink-1 {
  background: linear-gradient(83deg, $pink-light 1.01%, $pink-darker 98.22%);
}
.bz-bg-gradient-pink-2 {
  background: linear-gradient(180deg, $pink-darker 4.36%, $pink-light 94.36%);

  ::-webkit-scrollbar-thumb {
    background: $pink-60;
  }
}
.bz-bg-gradient-pink-3 {
  background: linear-gradient(180deg, $pink-dark 0%, $pink-darker 100%);
}
.bz-bg-gradient-pink-yellow {
  background: linear-gradient(83deg, $pink-dark 1.01%, $yellow-100 98.22%);
}
.bz-bg-gradient-pink-blue {
  background: linear-gradient(90deg, $pink-100 1.01%, $blue-100 98.22%);
}

.bz-bg-gradient-blue-1 {
  z-index: 1;
  background: linear-gradient(83deg, $blue-100 1.01%, $blue-60 98.22%);
}
.bz-bg-gradient-blue-2 {
  background: linear-gradient(338deg, $blue-100 15.05%, $blue-80 96.35%);
}
.bz-bg-gradient-blue-3 {
  background: linear-gradient(336deg, $blue-dark 15.58%, $blue-80 65.63%);
}

.bz-bg-gradient-yellow-1 {
  z-index: 1;
  background: linear-gradient(83deg, $yellow-100 1.01%,  $yellow-60 98.22%);
  &--smooth {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 87%;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(to bottom, $yellow-60 1.01%, rgba(255, 255, 255, 1) 80%);
      z-index: -1; /* Coloque o pseudo-elemento atrás do conteúdo */
    }
  }
}
.bz-bg-gradient-yellow-2 {
  background: linear-gradient(180deg, $yellow-100 1.01%, $yellow-60 98.22%);
}