@use '../abstract' as *;

.alert {
  --p-alert-text-color:   var(--color-neutral-70);
  --p-alert-bg-color:     var(--color-neutral-5);
  --p-alert-border-color: var(--color-neutral-15);

  /* states colors */
  --p-alert-color: var(--p-alert-color-default);

  --p-alert-color-default:  var(--color-neutral-20);
  --p-alert-color-info:     var(--color-information-100);
  --p-alert-color-success:  var(--color-success-100);
  --p-alert-border-warning: var(--color-warning-100);
  --p-alert-border-danger:  var(--color-danger-100);

  /*** End inner variables */

  /* use inner variables */
  color:            hsl(var(--p-alert-text-color));
  background-color: hsl(var(--p-alert-bg-color));
  border:           solid pxToRem(1) hsl(var(--p-alert-border-color));

  /* other styles */
  padding: pxToRem(12);
  padding-inline-start: pxToRem(8);
  border-radius: var(--border-radius-xsmall);

  &-grid {
    display: flex;
    gap: pxToRem(16);
    &::before {
      content:""; display:block; inline-size:pxToRem(2);
      background-color:hsl(var(--p-alert-color)); border-radius:pxToRem(1);
    }
    > [class*="icon-"]:where(:not(.icon-x)) { color:hsl(var(--p-alert-color)); font-size:var(--icon-size-large); line-height:1.25; }
    >  .button { order: 1; }
  }

  &-content  { display:flex; flex-direction:column; gap:pxToRem(8); flex:1; line-height:1.5; }
  &-title    { font-weight:bold; }
  &-message  {  }
  &-buttons  { margin-block-start:pxToRem(12); margin-inline-start:pxToRem(-16); }

  .button   { --button-size:1.25rem; font-size:var(--font-size-0); }

  /* alert layout state */
  &.is-action {
    position:relative; padding:pxToRem(16); padding-block-start:pxToRem(18);
    border-width:0; border-radius:0;
    .alert-buttons { display:flex; flex-wrap:wrap; margin-block-start:0; margin-inline-start:0; }
    .button { --button-size:2.5rem; }
    .alert-grid {
      flex-wrap:wrap;
      &::before {
        position:absolute; inset-inline:0; inset-block-start:0; border-radius:0;
        block-size:pxToRem(4); inline-size:100%;
      }
    }

    &-and-top-sticky {
      --p-alert-bg-color: var(--color-neutral-0);
      // #{$theme-dark} & { --p-alert-bg-color: var(--color-neutral-0); }
    }
    @media #{$break1} {
      .alert-buttons { flex-direction:column; inline-size:100%; }
    }
  }
  &.is-standalone {
    --p-alert-bg-color:     var(--color-neutral-0);
    --p-alert-border-color: var(--color-neutral-10);
    box-shadow:             var(--shadow-small);
    #{$theme-dark} & {
      --p-alert-bg-color:     var(--color-neutral-90);
      --p-alert-border-color: var(--color-neutral-85);
    }
  }

  /* alert types (colors) */
  &.is-info     { --p-alert-color:var(--p-alert-color-info); }
  &.is-success  { --p-alert-color:var(--p-alert-color-success); }
  &.is-warning  { --p-alert-color:var(--p-alert-border-warning); }
  &.is-danger   { --p-alert-color:var(--p-alert-border-danger); }

  &.is-no-bg    { border-width:0; background-color:hsl(var(--transparent)); }

  #{$theme-dark} & {
    --p-alert-text-color:   var(--color-neutral-5);
    --p-alert-bg-color:     var(--color-neutral-85);
    --p-alert-border-color: var(--color-neutral-80);
  }
}