//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
//
// 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(@color-tint, 10%), fade(@color-tint, 50%));
@accessibility-issue-info-border-color: contrast(@dialog-background-color, fade(@color-tint, 40%), @color-tint);

@accessibility-issue-warn-heading-text-color: contrast(@dialog-background-color, @color-white, #cc8500);
@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, 10%), fade(orange, 50%));
@accessibility-issue-warn-border-color: contrast(@dialog-background-color, fade(orange, 50%), fade(orange, 80%));

@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-border-color: contrast(@dialog-background-color, fade(@color-error, 40%), fade(@color-error, 80%));

@accessibility-issue-success-heading-text-color: contrast(@dialog-background-color, @color-white, @color-success);
@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%));
@accessibility-issue-success-border-color: contrast(@dialog-background-color, fade(@color-success, 40%), fade(@color-success, 80%));

.tox {
  .accessibility-issue {
    //
  }

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

  .accessibility-issue__description {
    align-items: stretch;
    border: 1px solid @border-color;
    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;
      }
    }

    > *:last-child:not(:only-child) {
      border-color: @border-color;
      border-style: solid;
    }
  }

  .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;
        border-color: @accessibility-issue-info-border-color;
        color: @accessibility-issue-info-body-text-color;

        > *:last-child {
          border-color: @accessibility-issue-info-border-color;
        }
      }

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

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

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

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

        > *:last-child {
          border-color: @accessibility-issue-warn-border-color;
        }
      }

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

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

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

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

        > *:last-child {
          border-color: @accessibility-issue-error-border-color;
        }
      }

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

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

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

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

        > *:last-child {
          border-color: @accessibility-issue-success-border-color;
        }
      }

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

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

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

  .tox-dialog__body-content .accessibility-issue__header h1,
  .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
    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;

      > *:last-child {
        border-left-width: 1px;
        padding-left: @pad-xs;
      }
    }
  }
}

.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;

      > *:last-child {
        border-right-width: 1px;
        padding-right: @pad-xs;
      }
    }
  }
}