@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/typography';
@import '../mixins';

@layer kz-components {
  .loadingHeading {
    @extend %loadingBase;

    background-color: rgba($color-gray-500-rgb, 0.2);
  }

  .isAnimated {
    @extend %loadingAnimated;
  }

  .display-0 {
    height: $typography-display-0-font-size;
    margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
  }

  .heading-1 {
    height: $typography-heading-1-font-size;
    margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
  }

  .heading-2 {
    height: $typography-heading-2-font-size;
    margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
  }

  .heading-3 {
    height: $typography-heading-3-font-size;
    margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
  }

  .heading-4 {
    height: $typography-heading-4-font-size;
    margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
  }

  .heading-5 {
    height: $typography-heading-5-font-size;
    margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
  }

  .heading-6 {
    height: $typography-heading-6-font-size;
    margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
  }

  .isReversed {
    background-color: rgba($color-white-rgb, 0.2);
  }

  .link {
    background-color: rgba($color-blue-500-rgb, 0.2);

    &.isReversed {
      background-color: rgba($color-white-rgb, 0.65);
    }
  }
}