@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$text: () !default;
$text: map.merge(
  (
    font-family-mono: value('font-family-mono'),
    font-weight-strong: 600,
    font-weight-thin: 300,
    color: value('content-color-base'),
    color-disabled: value('content-color-disabled'),
    color-marked: value('content-color-base'),
    color-reversed: value('bg-color-base'),
    mark-color: value('fill-color-hover'),
    code-bg-color: value('fill-color-humble'),
    code-radius: value('radius-small'),
    keyboard-bg-color: value('fill-color-background'),
    keyboard-b-color: value('border-color-light-1'),
    keyboard-radius: value('radius-base')
  ),
  $text
);

.#{$namespace}-text {
  &-vars {
    @include define-preset-values('text', $text);
  }

  @mixin define-text-style($style-map) {
    @include define-preset-style('text', $style-map);
  }

  @include basis {
    color: value('text-color');
    transition: value('transition-color'), value('transition-background');
  }

  @each $type in $types {
    &--#{$type} {
      @include define-text-style(
        (
          color: 'color' $type 'base',
          mark-color: 'color' $type 'opacity-1'
        )
      );
    }
  }

  &--strong {
    font-weight: value('text-font-weight-strong');
  }

  &--italic {
    font-style: italic;
  }

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

  &--mark {
    padding: 0 1px;
    color: value('text-color-marked');
    background-color: value('text-mark-color');
  }

  &--reversed {
    color: value('text-color-reversed');
  }

  &--disabled {
    color: value('text-color-disabled');
  }

  &--thin {
    font-weight: value('text-font-weight-thin');
  }

  &--code {
    padding: 3px 5px 2px;
    font-family: value('text-font-family-mono');
    background-color: value('text-code-bg-color');
    border-radius: value('text-code-radius');
  }

  &--keyboard {
    display: inline-flex;
    align-items: center;
    padding: 4px 5px;
    font-family: value('text-font-family-mono');
    line-height: 1;
    background-color: value('text-keyboard-bg-color');
    border: value('border-shape') value('text-keyboard-b-color');
    border-radius: value('text-keyboard-radius');
  }
}

$title: () !default;
$title: map.merge(
  (
    font-size-level-1: 36px,
    font-size-level-2: 30px,
    font-size-level-3: 24px,
    font-size-level-4: 20px,
    font-size-level-5: value('font-size-primary'),
    font-size-level-6: value('font-size-base'),
    font-weight: 600,
    font-weight-thin: 300,
    color: value('content-color-primary'),
    marker-width: 4px,
    marker-color: value('content-color-placeholder'),
    marker-offset: 16px
  ),
  $title
);

.#{$namespace}-title {
  &-vars {
    @include define-preset-values('title', $title);
  }

  @mixin define-title-style($style-map) {
    @include define-preset-style('title', $style-map);
  }

  @include basis {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: value('title-font-weight');
    color: value('title-color');
    transition: value('transition-color');
  }

  @each $type in $types {
    &--#{$type} {
      @include define-title-style(
        (
          color: 'color' $type 'base'
        )
      );
    }

    &--marker-#{$type} {
      @include define-title-style(
        (
          marker-color: 'color' $type 'base'
        )
      );
    }
  }

  &--top {
    margin-top: 0;
  }

  &--thin {
    font-weight: value('title-font-weight-thin');
  }

  @for $i from 1 through 6 {
    @at-root h#{$i}#{&} {
      font-size: value('title-font-size-level-#{$i}');
    }
  }

  &--marker {
    position: relative;

    &::before {
      position: absolute;
      inset-inline-start: calc(value('title-marker-offset') * -1);
      top: 0;
      bottom: 0;
      width: value('title-marker-width');
      content: '';
      background-color: value('title-marker-color');
      transition: value('transition-background');
    }
  }

  &--marker#{&}--aligned {
    padding-inline-start: value('title-marker-offset');

    &::before {
      inset-inline-start: 0;
    }
  }
}

$blockquote: () !default;
$blockquote: map.merge(
  (
    color: value('content-color-base'),
    padding-inline-start: 10px,
    marker-width: 4px,
    marker-color: value('border-color-base')
  ),
  $blockquote
);

.#{$namespace}-blockquote {
  &-vars {
    @include define-preset-values('blockquote', $blockquote);
  }

  @mixin define-blockquote-style($style-map) {
    @include define-preset-style('blockquote', $style-map);
  }

  @include basis {
    padding-inline-start: value('blockquote-padding-inline-start');
    margin: 1em 0;
    color: value('blockquote-color');
    border-inline-start: value('blockquote-marker-width') solid value('blockquote-marker-color');
    transition: value('transition-color');
  }

  @each $type in $types {
    &--#{$type} {
      @include define-blockquote-style(
        (
          color: 'color' $type 'base',
          marker-color: 'color' $type 'opacity-3'
        )
      );
    }
  }
}

.#{$namespace}-ol,
.#{$namespace}-ul {
  @include basis {
    padding: 0;
  }

  & > li {
    padding-inline-start: 4px;
    margin-inline-start: 20px;
  }
}

.#{$namespace}-ul {
  &--no-marker > li {
    margin-inline-start: 0;
  }
}