@import (reference) "../variables/legacy-variables.less";
@import (reference) "./addons/_spacing-utilities.less";
@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./mixins/_alerts.less";

/**
 * DEPRECATED: use <InfoPrompt /> component instead
 */

.alert {
  padding: var(--size-16);
  border-radius: 10px;
  color: var(--color-content-primary);
  background-color: var(--color-background-neutral);
  min-width: 200px;
  margin-bottom: var(--size-16);

  .np-theme-personal & {
    padding: var(--padding-medium);
    border-radius: var(--radius-medium);
    .alert__message {
      margin-top: 0;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      
      .alert__action {
        margin-top: var(--size-8);
      }
    }
  }

  .alert__icon {
    width: var(--size-32);
    height: var(--size-32);
    border-radius: 50%;
    flex: none;
  }

  .close {
    margin-top: var(--size-4);

    .np-theme-personal & {
      margin-top: calc(var(--size-8) * -1);
      margin-inline-end: calc(var(--size-8) * -1);
    }
  }

  p,
  ul {
    margin-bottom: 0;
  }

  p + p {
    margin-top: var(--padding-x-small);
  }
}

.arrow {
  .alert-arrow(@alert-arrow-width);
}

.alert-detach.arrow {
  border-radius: var(--radius-small);
}

// Field validation alerts
.form-group {
  .alert {
    position: relative; // Elevate over input
    padding: 4px 16px 3px;
    margin-top: -2px;
    border-style: solid;
    border-color: var(--color-border-neutral);
    border-width: 0 1px 1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 0;
    transition: border-color 0.15s ease-in-out;

    .alert-arrow(@alert-arrow-width);
  }

  .radio ~ .alert,
  .checkbox ~ .alert,
  .alert-detach {
    border-width: 0;
    margin-top: var(--size-12);
    border-radius: var(--radius-small);
  }

  .alert-focus,
  .alert-info,
  .alert-success,
  .alert-warning,
  .alert-danger {
    display: none;
  }
}

.alert-success,
.alert-positive {
  .alert-variant(
    var(--color-background-positive);
    var(--color-content-positive);
    var(--color-content-positive-hover);
  );

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    .alert-variant(
      @color-navy-background-positive;
      @color-navy-content-positive;
      @color-navy-content-positive-hover;
    );
  }
}

.alert-info,
.alert-neutral {
  .alert-variant(
    var(--color-background-neutral);
    var(--color-content-primary);
    var(--color-content-primary);
  );

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    .alert-variant(
      @color-navy-background-neutral;
      @color-navy-content-primary;
      @color-navy-content-primary;
    );
  }
}

.alert-warning {
  .alert-variant(
    var(--color-background-warning);
    var(--color-content-warning);
    var(--color-content-warning-hover);
  );

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    .alert-variant(
      @color-navy-background-warning;
      @color-navy-content-warning;
      @color-navy-content-warning-hover;
    );
  }
}

.alert-danger,
.alert-negative {
  .alert-variant(
    var(--color-background-negative);
    var(--color-content-negative);
    var(--color-content-negative-hover);
  );

  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
  .bg-primary & {
    .alert-variant(
      @color-navy-background-negative;
      @color-navy-content-negative;
      @color-navy-content-negative-hover;
    );
  }
}

.form-group:focus-within .alert-focus,
input:focus ~ .alert-focus,
.btn:focus ~ .alert-focus {
  display: block;
  border-color: var(--color-interactive-accent);
}

.focus .alert-focus,
.has-focus .alert-focus,
.has-info .alert-info,
.has-info .alert-neutral,
.has-warning .alert-warning,
.has-success .alert-success,
.has-success .alert-positive,
.has-error .alert-danger,
.has-error .alert-negative {
  display: block;
}

// Ensure we only show one type at a time
.has-info .help-block,
.has-info .alert-focus,
.has-warning .help-block,
.has-warning .alert-focus,
.has-warning .alert-info,
.has-warning .alert-neutral,
.has-success .help-block,
.has-success .alert-focus,
.has-success .alert-info,
.has-success .alert-neutral,
.has-success .alert-warning,
.has-error .help-block,
.has-error .alert-focus,
.has-error .alert-info,
.has-error .alert-neutral,
.has-error .alert-warning,
.has-error .alert-success,
.has-error .alert-positive {
  display: none !important;
}

.np-theme-personal {
  .alert {
    padding: var(--size-16);

    flex-direction: row;

    .alert__message {
      padding-top: 0;
      padding-inline-start: var(--padding-small);
    }
  }

  .alert-success,
  .alert-positive,
  .alert-info,
  .alert-neutral,
  .alert-warning,
  .alert-danger,
  .alert-negative {
    &,
    // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
    .bg-primary & {
      .alert-variant(
        var(--color-background-neutral);
        var(--color-content-secondary);
        var(--color-content-link-hover);
      );
    }

    .np-link {
      color: var(--color-content-link);

      &:hover,
      &:focus {
        color: var(--color-content-link-hover);
      }
    }
  }
}