@use '../../styles.scss';
@use '../../themes/defaults';

.jse-message {
  font-family: defaults.$font-family-mono;
  font-size: defaults.$font-size-mono;

  padding: defaults.$padding;
  display: flex;
  gap: defaults.$padding;
  flex-wrap: wrap;
  align-items: stretch;

  &.jse-success {
    background: defaults.$message-success-background;
    color: defaults.$message-success-color;
  }

  .jse-text {
    display: flex;
    flex: 1;
    min-width: 60%;
    align-items: center;

    .jse-text-centered {
    }

    &.jse-clickable {
      cursor: pointer;

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

  &.jse-error {
    background: defaults.$message-error-background;
    color: defaults.$message-error-color;
  }

  &.jse-warning {
    background: defaults.$message-warning-background;
    color: defaults.$message-warning-color;
  }

  &.jse-info {
    background: defaults.$message-info-background;
    color: defaults.$message-info-color;
  }

  .jse-actions {
    display: flex;
    gap: defaults.$padding;

    button.jse-action {
      @include styles.jsoneditor-button;

      background: defaults.$message-action-background;
      color: inherit;

      padding: styles.$padding-half defaults.$padding;

      &:hover {
        background: defaults.$message-action-background-highlight;
      }
    }
  }
}