@use 'Foundation/scss/typography-chains' as chains;

$font-size-tiny: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
$font-size-small: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
$font-size-medium: var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px));
$line-height-tiny: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
$line-height-small: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px));
$line-height-medium: var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px));
$font-weight-thin: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
$font-weight-normal: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
$font-weight-bold: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
$letter-spacing: var(--wds-font-letter-spacing-0, unset);
$list-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9.5,14.4393398 L16.9393398,7 C17.232233,6.70710678 17.7071068,6.70710678 18,7 C18.2928932,7.29289322 18.2928932,7.76776695 18,8.06066017 L9.5,16.5606602 L6,13.0606602 C5.70710678,12.767767 5.70710678,12.2928932 6,12 C6.29289322,11.7071068 6.76776695,11.7071068 7.06066017,12 L9.5,14.4393398 Z'/%3E%3C/svg%3E");
$list-icon-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L7.5,12.5606602 L5,10.0606602 C4.70710678,9.76776695 4.70710678,9.29289322 5,9 C5.29289322,8.70710678 5.76776695,8.70710678 6.06066017,9 L7.5,10.4393398 L11.9393398,6 Z'/%3E%3C/svg%3E");
$list-circle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
$list-circle-icon-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2'%3E%3C/circle%3E%3C/svg%3E");

.text {
  white-space: pre-line;
  color: white;

  &#{&}--weight-thin#{&}--size-tiny {
    font-family: chains.$font-family-default;
    font-size: $font-size-tiny;
    font-weight: $font-weight-thin;
    line-height: $line-height-tiny;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-thin#{&}--size-small {
    font-family: chains.$font-family-default;
    font-size: $font-size-small;
    font-weight: $font-weight-thin;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-thin#{&}--size-medium {
    font-family: chains.$font-family-default;
    font-size: $font-size-medium;
    font-weight: $font-weight-thin;
    line-height: $line-height-medium;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-normal#{&}--size-tiny {
    font-family: chains.$font-family-default;
    font-size: $font-size-tiny;
    font-weight: $font-weight-normal;
    line-height: $line-height-tiny;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-normal#{&}--size-small {
    font-family: chains.$font-family-default;
    font-size: $font-size-small;
    font-weight: $font-weight-normal;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-normal#{&}--size-medium {
    font-family: chains.$font-family-default;
    font-size: $font-size-medium;
    font-weight: $font-weight-normal;
    line-height: $line-height-medium;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-bold#{&}--size-tiny {
    font-family: chains.$font-family-default;
    font-size: $font-size-tiny;
    font-weight: $font-weight-bold;
    line-height: $line-height-tiny;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-bold#{&}--size-small {
    font-family: chains.$font-family-default;
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
    line-height: $line-height-small;
    letter-spacing: $letter-spacing;
  }

  &#{&}--weight-bold#{&}--size-medium {
    font-family: chains.$font-family-default;
    font-size: $font-size-medium;
    font-weight: $font-weight-bold;
    line-height: $line-height-medium;
    letter-spacing: $letter-spacing;
  }

  &#{&}--skin-standard {
    color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
  }

  &#{&}--skin-standard#{&}--light {
    color: var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF));
  }

  &#{&}--skin-standard#{&}--secondary {
    color: var(--wds-color-text-standard-secondary, var(--wsr-color-D20, #333853));
  }

  &#{&}--skin-standard#{&}--light#{&}--secondary {
    color: var(--wds-color-text-standard-secondary-light, var(--wsr-color-D40, #868AA5));
  }

  &#{&}--skin-success {
    color: var(--wds-color-text-success, var(--wsr-color-G10, #25A55A));
  }

  &#{&}--skin-error {
    color: var(--wds-color-text-destructive, var(--wsr-color-R10, #E62214));
  }

  &#{&}--skin-premium {
    color: var(--wds-color-text-premium, var(--wsr-color-P10, #9A27D5));
  }

  &#{&}--skin-disabled {
    color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
  }

  &#{&}--skin-disabled#{&}--light {
    color: var(--wds-color-text-disabled-light, var(--wsr-color-D80-70, rgba(255, 255, 255, 0.70)));
  }

  &#{&}--skin-primary {
    color: var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF));
  }

  & > a {
    cursor: pointer;
    color: var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116DFF));
    text-decoration: none;
  }

  @media (hover: hover) {
    & > a:hover {
      color: var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B20, #5999FF));
    }
  }

  & ol,
  & ul {
    padding: 0;
    margin: var(--wds-space-100, 6px) 0;
  }

  & ul {
    list-style-type: none;
  }

  & > ol ol,
  & > ol ul,
  & > ul ol {
    padding: 0;
  }

  & > ol li,
  & > ul li {
    position: relative;
  }

  &#{&}--size-medium ul li {
    padding-left: var(--wds-space-500, 30px);
    margin-bottom: var(--wds-space-100, 6px);
  }

  &#{&}--size-medium ol li {
    margin: 0 0 var(--wds-space-100, 6px) var(--wds-space-500, 30px);
  }

  &#{&}--size-small ul li {
    padding-left: var(--wds-space-400, 24px);
    margin-bottom: var(--wds-space-150, 9px);
  }

  &#{&}--size-small ol li {
    margin: 0 0 var(--wds-space-150, 9px) var(--wds-space-400, 24px);
  }

  &#{&}--size-small li:last-child {
    margin-bottom: var(--wds-space-100, 6px);
  }

  &#{&}--size-tiny ul li {
    padding-left: var(--wds-space-400, 22px);
    margin-bottom: var(--wds-space-150, 9px);
  }

  &#{&}--size-tiny ol li {
    margin: 0 0 var(--wds-space-150, 9px) var(--wds-space-400, 22px);
  }

  &#{&}--size-tiny li:last-child {
    margin-bottom: var(--wds-space-100, 6px);
  }

  & ul li::before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    background-color: currentColor;
  }

  &#{&}--size-medium ul li::before {
    width: 24px;
    height: 24px;
  }

  &#{&}--size-small ul li::before,
  &#{&}--size-tiny ul li::before {
    width: 18px;
    height: 18px;
  }

  &#{&}--size-tiny ul li::before {
    margin-top: -2px;
  }

  &#{&}--size-medium#{&}--list-style-checkmark ul li::before {
    /* stylelint-disable-next-line plugin/use-baseline */
    -webkit-mask: $list-icon no-repeat center/contain;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: $list-icon no-repeat center/contain;
  }

  &#{&}--size-small#{&}--list-style-checkmark ul li::before,
  &#{&}--size-tiny#{&}--list-style-checkmark ul li::before {
    /* stylelint-disable-next-line plugin/use-baseline */
    -webkit-mask: $list-icon-small no-repeat center/contain;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: $list-icon-small no-repeat center/contain;
  }

  &#{&}--size-medium#{&}--list-style-circle ul li::before {
    /* stylelint-disable-next-line plugin/use-baseline */
    -webkit-mask: $list-circle-icon no-repeat center/contain;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: $list-circle-icon no-repeat center/contain;
  }

  &#{&}--size-small#{&}--list-style-circle ul li::before,
  &#{&}--size-tiny#{&}--list-style-circle ul li::before {
    /* stylelint-disable-next-line plugin/use-baseline */
    -webkit-mask: $list-circle-icon-small no-repeat center/contain;
    /* stylelint-disable-next-line plugin/use-baseline */
    mask: $list-circle-icon-small no-repeat center/contain;
  }

  & p {
    margin-block-end: var(--wds-space-100, 6px);
    margin-block-start: var(--wds-space-100, 6px);
  }

  &#{&}--size-tiny p:empty {
    min-height: var(--wds-font-line-height-body-tiny, 15px);
  }

  &#{&}--size-small p:empty {
    min-height: var(--wds-font-line-height-body-small, 18px);
  }

  &#{&}--size-medium p:empty {
    min-height: var(--wds-font-line-height-body-medium, 24px);
  }

  &#{&}--overflow-wrap-normal {
    overflow-wrap: normal;
  }

  &#{&}--overflow-wrap-break-word {
    overflow-wrap: break-word;
  }

  &#{&}--overflow-wrap-anywhere {
    overflow-wrap: anywhere;
  }
}