// The Markdown Format uses by default a few EUI components.
// It uses the EuiText to wrap all the content so all the styles related with scaling based on the font-size live inside `_text.scss`

// This should only be used for .euiMarkdownFormat, therefore it's not included in a separate mixin file
@mixin euiMarkdownAdjustBorderColors($color) {
  .euiMarkdownFormat__blockquote {
    border-left-color: $color;
  }

  .euiHorizontalRule {
    background-color: $color;
    color: $color; // ensure that firefox gets the `currentColor`
  }

  .euiMarkdownFormat__table {
    border-left: 1px solid $color;
  }

  .euiMarkdownFormat__table th,
  .euiMarkdownFormat__table td {
    border-top: 1px solid $color;
    border-bottom: 1px solid $color;

    &:last-child {
      border-right: 1px solid $color;
    }
  }

  .euiMarkdownFormat__table tr {
    border-top: 1px solid $color;
  }
}

.euiMarkdownFormat {
  $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15);

  // stylelint-disable indentation
  $euiMarkdownBorderColors: (
    default: $euiMarkdownAlphaShade,
    subdued: $euiTextSubduedColor,
    success: $euiColorSuccess,
    accent: $euiColorAccent,
    warning: $euiColorWarning,
    danger: $euiColorDanger,
    ghost: $euiColorGhost,
    inherit: currentColor,
    custom: currentColor,
  );
  // stylelint-enable indentation

  // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors.
  // For the `custom` and `inherit` colors we're assigning the `currentColor` so we can get the current or computed value of the `color` property
  @each $name, $color in $euiMarkdownBorderColors {
    &[class*='euiTextColor-#{$name}'] {
      @include euiMarkdownAdjustBorderColors($color);
    }
  }

  .euiCheckbox {
    // stylelint-disable-next-line declaration-no-important
    margin-bottom: 0 !important;
  }

  // We're adjusting the position of the checkboxes so that when the text size is `relative` the checkboxes get better positioned
  .euiCheckbox .euiCheckbox__input + .euiCheckbox__square {
    top: 50%;
    transform: translateY(-50%);
  }

  // Tables
  .euiMarkdownFormat__table {
    display: block;
    width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
  }
}