@use 'src/styles/abstracts' as *;

.Text {
  &__size {
    &_36 {
      font-size: $text-xxxl;
    }

    &_24 {
      font-size: $text-xxl;
    }

    &_18 {
      font-size: $text-xl;
    }

    &_16 {
      font-size: $text-lg;
    }

    &_14 {
      font-size: $text-md;
    }
    &_12 {
      font-size: $text-sm;
    }
    &_11 {
      font-size: $text-xs;
    }
    &_10 {
      font-size: $text-xxs;
    }
    &_8 {
      font-size: $text-xxxs;
    }
  }

  &__weight {
    &_300 {
      font-weight: $font-300;
    }
    &_400 {
      font-weight: $font-400;
    }
    &_500 {
      font-weight: $font-500;
    }
    &_600 {
      font-weight: $font-600;
    }
    &_700 {
      font-weight: $font-700;
    }
    &_800 {
      font-weight: $font-700;
    }
    &_900 {
      font-weight: $font-700;
    }
  }

  &__color {
    &_primary {
      color: $text-color;
      &_100 {
        color: $pico;
      }
      &_90 {
        color: $pico-90;
      }
      &_80 {
        color: $pico-80;
      }
      &_70 {
        color: $pico-70;
      }
      &_60 {
        color: $pico-60;
      }
      &_50 {
        color: $pico-50;
      }
      &_40 {
        color: $pico-40;
      }
      &_30 {
        color: $pico-30;
      }
      &_20 {
        color: $pico-20;
      }
      &_10 {
        color: $pico-10;
      }
      &_5 {
        color: $pico-5;
      }
    }
    &_secondary {
      color: #fff;
      &_100 {
        color: $pico;
      }
      &_80 {
        color: $pico-80;
      }
      &_50 {
        color: $pico-50;
      }
      &_10 {
        color: $pico-10;
      }
    }
    &_error {
      color: $error-color;
      &_100 {
        color: $error-color;
      }
      &_80 {
        color: $error-color-80;
      }
      &_50 {
        color: $error-color-50;
      }
      &_10 {
        color: $error-color-10;
      }
      &_5 {
        color: $error-color-5;
      }
    }
    &_warning {
      color: $warning-color;
      &_100 {
        color: $warning-color;
      }
      &_80 {
        color: $warning-color-80;
      }
      &_50 {
        color: $warning-color-50;
      }
      &_10 {
        color: $warning-color-10;
      }
      &_5 {
        color: $warning-color-5;
      }
    }
    &_info {
      color: $primary-color;
      &_100 {
        color: $primary-color;
      }
      &_80 {
        color: $primary-color-80;
      }
      &_50 {
        color: $primary-color-50;
      }
      &_10 {
        color: $primary-color-10;
      }
      &_5 {
        color: $primary-color-5;
      }
    }
    &_success {
      color: $success-color;
      &_100 {
        color: $success-color;
      }
      &_80 {
        color: $success-color-80;
      }
      &_50 {
        color: $success-color-50;
      }
      &_25 {
        color: $success-color-25;
      }
      &_10 {
        color: $success-color-10;
      }
      &_5 {
        color: $success-color-5;
      }
    }
    &_inherit {
      color: inherit;
    }
  }
}
