@use '../../internals/Box/styles/index' as box;
@use '../../styles/mixins/utilities' as utils;
@use '../../styles/mixins/color-modes' as color-modes;
@use './variables';
@use '../../Kbd/styles/mixin' as kbd;

// Heading
// -------------------------

.rs-text {
  // Base styles
  font-family: var(--rs-font-family-base);
  margin: 0;
  color: var(--rs-text-color, var(--rs-text-primary));
  font-size: var(--rs-font-size);
  line-height: var(--rs-text-line-height, var(--rs-line-height-md));
  line-clamp: var(--rs-text-max-lines);

  &.rs-text-muted {
    color: var(--rs-text-secondary);
  }

  // Text Align: left | center | right | justify
  &-left {
    text-align: start;
  }

  &-center {
    text-align: center;
  }

  &-right {
    text-align: end;
  }

  &-justify {
    text-align: justify;
  }

  // Text Transform: none | uppercase | lowercase | capitalize
  &-uppercase {
    text-transform: uppercase;
  }

  &-lowercase {
    text-transform: lowercase;
  }

  &-capitalize {
    text-transform: capitalize;
  }

  // Text Weight: thin | light | regular | medium | semibold | bold | extrabold
  &-thin {
    font-weight: var(--rs-text-weight-thin);
  }

  &-light {
    font-weight: var(--rs-text-weight-light);
  }

  &-medium {
    font-weight: var(--rs-text-weight-medium);
  }

  &-semibold {
    font-weight: var(--rs-text-weight-semibold);
  }

  &-bold {
    font-weight: var(--rs-text-weight-bold);
  }

  &-extrabold {
    font-weight: var(--rs-text-weight-extrabold);
  }

  &-pre-line {
    white-space: pre-line;
  }

  &-ellipsis {
    overflow: hidden;

    @supports (-webkit-line-clamp: 1) {
      & {
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }

    @supports not (-webkit-line-clamp: 1) {
      & {
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
      }
    }
  }

  // Colorful tags
  @each $color
    in (
      'primary',
      'secondary',
      'success',
      'warning',
      'error',
      'info',
      'dark',
      'cyan',
      'violet',
      'orange',
      'yellow',
      'green',
      'red',
      'blue'
    )
  {
    &-#{$color} {
      --rs-text-color: var(--rs-#{$color}-500);
    }
  }

  // Size variants
  $sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl;
  @each $size in $sizes {
    &:where([style*='size-#{$size}']) {
      --rs-text-line-height: var(--rs-text-line-height-#{$size});
    }
  }
}

kbd.rs-text {
  @include kbd.kbd();
}

blockquote.rs-text {
  font-style: italic;
  padding-inline-start: 1.5rem;
  border-left: 2px solid var(--rs-gray-200);
}