@use "sass:map";

$textRhythm: $sizeM;

.vuiText {
  overflow-wrap: break-word;
  word-break: break-word;

  a {
    color: var(--vui-color-primary-shade) !important;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: auto;
  }

  ul,
  ol {
    margin-left: $sizeM;
    margin-bottom: $textRhythm;
  }

  hr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid;
    width: 100%;
    border-bottom-color: var(--vui-color-border-medium);
    margin-bottom: $textRhythm;
  }

  // Default block styles for code and pre.
  pre:not(:has(> code)),
  code {
    display: block;
    padding: $sizeXs $sizeS;
    background-color: var(--vui-color-light-shade);
    font-family: var(--vui-font-family-monospace);
    border-radius: $sizeXs;
    margin-bottom: $textRhythm;
  }

  pre:has(> code) {
    display: block;
    padding: $sizeXs $sizeS;
    background-color: var(--vui-color-light-shade);
    margin-bottom: $textRhythm;
    border-radius: $sizeXs;
    font-family: var(--vui-font-family-monospace);
  }

  pre > code {
    display: block;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: var(--vui-font-family-monospace);
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
  }

  kbd {
    background-color: var(--vui-color-light-shade);
    border: 1px solid var(--vui-color-border-medium);
    border-radius: $sizeXxs;
    padding: 0 $sizeXxs;
    font-family: var(--vui-font-family-monospace);
    font-size: 0.9em;
  }

  // Inline styles when nested in text-like elements.
  strong,
  b,
  em,
  i,
  p,
  li,
  td,
  th,
  span,
  label,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    > pre,
    > code {
      display: inline;
      padding: $sizeXxxs $sizeXxs;
      border-radius: $sizeXs;
      overflow: auto;
      background-color: var(--vui-color-light-shade);
      font-family: var(--vui-font-family-monospace);
      margin-bottom: 0;
    }
  }

  // Block styles when nested in block-like elements.
  div,
  blockquote,
  section,
  article,
  aside,
  main,
  nav,
  header,
  footer {
    > pre:not(:has(> code)),
    > code {
      display: block;
    }

    > pre:has(> code) {
      display: block;
    }
  }

  blockquote {
    border-left: 4px solid var(--vui-color-light-shade);
    padding-left: $sizeM;
    color: var(--vui-color-darker-shade);
    margin-bottom: $textRhythm;
  }

  table {
    width: 100%;
    table-layout: fixed;
    border: 1px solid var(--vui-color-border-light);
    margin-bottom: $textRhythm;

    thead {
      background-color: var(--vui-color-light-shade);
      border-bottom: 1px solid var(--vui-color-border-light);
    }

    tbody tr {
      border-bottom: 1px solid var(--vui-color-border-light);
    }

    th {
      font-size: $fontSizeSmall;
      font-weight: $fontWeightBold;
      padding: $sizeXs $sizeS;
      text-align: left;
    }

    td {
      font-size: $fontSizeStandard;
      vertical-align: middle;
      padding: $sizeS $sizeS;
    }
  }

  sup {
    vertical-align: super;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

.vuiText--truncate {
  @include truncateText;
}

.vuiText--preserveWhiteSpace {
  white-space: pre-wrap;
}

@mixin defineTextStyles($fontSize, $fontWeight) {
  color: var(--vui-color-text);
  font-size: $fontSize;
  line-height: 1.4;

  p,
  ul,
  ol {
    font-size: $fontSize;
    line-height: 1.4;
    font-weight: $fontWeight;
    margin-bottom: $textRhythm;
  }

  code,
  pre {
    font-size: $fontSize * 0.85;
    font-family: var(--vui-font-family-monospace);
  }

  h1 {
    font-size: $fontSize * 2;
    line-height: 1.1;
    font-weight: $fontWeightStrong;
    margin-bottom: $textRhythm;
  }

  h2 {
    font-size: $fontSize * 1.5;
    line-height: 1.2;
    font-weight: $fontWeightNormal;
    margin-bottom: $textRhythm;
  }

  h3 {
    font-size: $fontSize * 1.25;
    line-height: 1.3;
    font-weight: $fontWeightNormal;
    margin-bottom: $textRhythm;
  }

  h4 {
    font-size: $fontSize;
    line-height: 1.4;
    font-weight: $labelFontWeight;
    margin-bottom: $textRhythm;
  }

  h5 {
    font-size: $fontSize * 0.85;
    line-height: 1.4;
    font-weight: $labelFontWeight;
    margin-bottom: $textRhythm;
  }

  h6 {
    font-size: $fontSize * 0.75;
    line-height: 1.4;
    font-weight: $labelFontWeight;
    margin-bottom: $textRhythm;
  }
}

$size: (
  xs: (
    size: $fontSizeSmall,
    weight: $fontWeightStrong
  ),
  s: (
    size: $fontSizeStandard,
    weight: $fontWeightNormal
  ),
  m: (
    size: $fontSizeMedium,
    weight: $fontWeightNormal
  ),
  l: (
    size: $fontSizeLarge,
    weight: $fontWeightNormal
  )
);

@each $sizeName, $sizeValue in $size {
  .vuiText--#{$sizeName} {
    @include defineTextStyles(map.get($sizeValue, "size"), map.get($sizeValue, "weight"));
  }
}

$align: left, center, right;

@each $alignValue in $align {
  .vuiText--#{$alignValue} {
    text-align: #{$alignValue};
  }
}