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

.jse-message {
  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);

  padding: $padding;
  display: flex;
  gap: $padding;
  flex-wrap: wrap;
  align-items: center;
  border-radius: var(--jse-main-border-radius-bottom);

  &.jse-success {
    background: var(--jse-message-success-background);
    color: var(--jse-message-success-color);
  }

  .jse-text {
    flex: 1;
    min-width: 60%;

    &.jse-clickable {
      cursor: pointer;

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

  &.jse-error {
    background: var(--jse-message-error-background);
    color: var(--jse-message-error-color);
  }

  &.jse-warning {
    background: var(--jse-message-warning-background);
    color: var(--jse-message-warning-color);
  }

  &.jse-info {
    background: var(--jse-message-info-background);
    color: var(--jse-message-info-color);
  }

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

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

      background: var(--jse-message-action-background);
      color: inherit;

      padding: $padding-half $padding;

      &:hover {
        background: var(--jse-message-action-background-highlight);
      }
    }
  }
}