@import '../../styles.scss';

.jse-validation-errors-overview {
  font-family: var(--jse-font-family-mono);
  font-size: var(--jse-font-size-mono);
  background: var(--jse-message-warning-background);
  color: var(--jse-message-warning-color);
  overflow: auto;
  max-height: $errors-overview-max-height;

  table {
    border-collapse: collapse;
    width: 100%;

    tr {
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      td {
        padding: 4px $padding;
        vertical-align: middle;

        &.jse-validation-error-icon {
          width: 36px;
          box-sizing: border-box;
        }

        &.jse-validation-error-action {
          width: 36px;
          box-sizing: border-box;
          padding: 0;

          button.jse-validation-errors-collapse {
            @include jsoneditor-button;

            width: 36px;
            height: 26px;
            cursor: pointer;

            &:hover {
              background-color: rgba(255, 255, 255, 0.2);
            }
          }
        }

        div.jse-validation-errors-expand {
          display: inline-block;
          position: relative;
          top: 3px;
          // TODO: position this icon in a better way
        }
      }
    }
  }
}