//
//
// Accessibility checker

@accessibility-issue-info-heading-text-color: contrast(@dialog-background-color, @color-white, @color-tint);
@accessibility-issue-info-body-text-color: contrast(@dialog-background-color, @color-white, @text-color);
@accessibility-issue-info-background-color: contrast(@dialog-background-color, fade(darken(@color-tint, 3%), 10%), fade(darken(@color-tint, 3%), 40%));

@accessibility-issue-warn-heading-text-color: contrast(@dialog-background-color, @color-white, darken(#cc8500, 12%));
@accessibility-issue-warn-body-text-color: contrast(@dialog-background-color, @color-white, @text-color);
@accessibility-issue-warn-background-color: contrast(@dialog-background-color, fade(orange, 8%), fade(orange, 50%));
@accessibility-issue-warn-icon-background-color: #FFE89D;
@accessibility-issue-warn-icon-hover-background-color: #F2D574;
@accessibility-issue-warn-icon-active-background-color: #E8C657;

@accessibility-issue-error-heading-text-color: contrast(@dialog-background-color, @color-white, @color-error);
@accessibility-issue-error-body-text-color: contrast(@dialog-background-color, @color-white, @text-color);
@accessibility-issue-error-background-color: contrast(@dialog-background-color, fade(@color-error, 10%), fade(@color-error, 50%));
@accessibility-issue-error-icon-background-color: #F2BFBF;
@accessibility-issue-error-icon-hover-background-color: #E9A4A4;
@accessibility-issue-error-icon-active-background-color: #EE9494;

@accessibility-issue-success-heading-text-color: contrast(@dialog-background-color, @color-white, darken(@color-success, 15%));
@accessibility-issue-success-body-text-color: contrast(@dialog-background-color, @color-white, @text-color);
@accessibility-issue-success-background-color: contrast(@dialog-background-color, fade(@color-success, 10%), fade(@color-success, 50%));

.tox {
  .accessibility-issue {
    //
  }

  .accessibility-issue__header {
    align-items: center;
    display: flex;
    margin-bottom: @pad-xs;
  }

  .accessibility-issue__description {
    align-items: stretch;
    border-radius: @panel-border-radius;
    display: flex;
    justify-content: space-between;

    > div {
      padding-bottom: @pad-xs;

      > div {
        align-items: center;
        display: flex;
        margin-bottom: @pad-xs;

        .tox-icon svg {
          display: block;
        }
      }
    }
  }

  .accessibility-issue__repair {
    margin-top: 16px;
  }

  // Wrap all states with `tox-dialog__body-content` class for css specificity of primarily the H2 colors
  .tox-dialog__body-content {

    // Info state
    .accessibility-issue--info {
      .accessibility-issue__description {
        background-color: @accessibility-issue-info-background-color;
        color: @accessibility-issue-info-body-text-color;
      }

      .tox-form__group h2 {
        color: @accessibility-issue-info-heading-text-color;
      }

      .tox-icon svg {
        fill: @accessibility-issue-info-heading-text-color;
      }

      a.tox-button--naked.tox-button--icon {
        background-color: @button-background-color;
        color: @color-white;

        &:hover,
        &:focus {
          background-color: @button-hover-background-color;
        }

        &:active {
          background-color: @button-active-background-color;
        }
      }
    }

    // Warn state
    .accessibility-issue--warn {
      .accessibility-issue__description {
        background-color: @accessibility-issue-warn-background-color;
        color: @accessibility-issue-warn-body-text-color;
      }

      .tox-form__group h2 {
        color: @accessibility-issue-warn-heading-text-color;
      }

      .tox-icon svg {
        fill: @accessibility-issue-warn-heading-text-color;
      }

      /* stylelint-disable-next-line no-descending-specificity */
      a.tox-button--naked.tox-button--icon {
        background-color: @accessibility-issue-warn-icon-background-color;
        color: @color-black;

        &:hover,
        &:focus {
          background-color: @accessibility-issue-warn-icon-hover-background-color;
          color: @color-black;
        }

        &:active {
          background-color: @accessibility-issue-warn-icon-active-background-color;
          color: @color-black;
        }
      }
    }

    // Error state
    .accessibility-issue--error {
      .accessibility-issue__description {
        background-color: @accessibility-issue-error-background-color;
        color: @accessibility-issue-error-body-text-color;
      }

      .tox-form__group h2 {
        color: @accessibility-issue-error-heading-text-color;
      }

      .tox-icon svg {
        fill: @accessibility-issue-error-heading-text-color;
      }

      /* stylelint-disable-next-line no-descending-specificity */
      a.tox-button--naked.tox-button--icon {
        background-color: @accessibility-issue-error-icon-background-color;
        color: @color-black;

        &:hover,
        &:focus {
          background-color: @accessibility-issue-error-icon-hover-background-color;
          color: @color-black;
        }

        &:active {
          background-color: @accessibility-issue-error-icon-active-background-color;
          color: @color-black;
        }
      }
    }

    // Success state
    .accessibility-issue--success {
      .accessibility-issue__description {
        background-color: @accessibility-issue-success-background-color;
        color: @accessibility-issue-success-body-text-color;

        > *:last-child {
          display: none;
        }
      }

      .tox-form__group h2 {
        color: @accessibility-issue-success-heading-text-color;
      }

      .tox-icon svg {
        fill: @accessibility-issue-success-heading-text-color;
      }
    }
  }

  .tox-dialog__body-content .accessibility-issue__header .tox-form__group h1,
  .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
    font-size: @font-size-sm;
    margin-top: 0;
    // Inherits other styles from dialog body content heading
  }
}

.tox:not([dir=rtl]) {
  .tox-dialog__body-content {
    .accessibility-issue__header {
      .tox-button {
        margin-left: @pad-xs;
      }

      > *:nth-last-child(2) {
        margin-left: auto;
      }
    }

    .accessibility-issue__description {
      padding: @pad-xs @pad-xs @pad-xs @pad-sm;
    }
  }
}

.tox[dir=rtl] {
  .tox-dialog__body-content {
    .accessibility-issue__header {
      .tox-button {
        margin-right: @pad-xs;
      }

      > *:nth-last-child(2) {
        margin-right: auto;
      }
    }

    .accessibility-issue__description {
      padding: @pad-xs @pad-sm @pad-xs @pad-xs;
    }
  }
}