/*
 * Alert component
 */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;

$-module-name: 'pkt-alert';

// Spacing
$-spacing-8: map.get(variables.$spacing, 'size-8');
$-spacing-12: map.get(variables.$spacing, 'size-12');
$-spacing-16: map.get(variables.$spacing, 'size-16');
$-spacing-24: map.get(variables.$spacing, 'size-24');
$-border-thickness: map.get(variables.$spacing, 'size-4');

// default is "info"
.pkt-alert {
  --pkt-color-alert-bc: var(--pkt-color-border-blue);
  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);
  --pkt-color-alert-txt: var(--pkt-color-text-body-dark);
  --pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000);
}

.pkt-alert--error {
  --pkt-color-alert-bc: var(--pkt-color-border-red);
  --pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red);
}

.pkt-alert--success {
  --pkt-color-alert-bc: var(--pkt-color-border-green);
  --pkt-color-alert-bg: var(--pkt-color-surface-default-light-green);
}

.pkt-alert--warning {
  --pkt-color-alert-bc: var(--pkt-color-border-yellow);
  --pkt-color-alert-bg: var(--pkt-color-surface-default-yellow);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

pkt-alert {
  display: block;
}

.pkt-alert__grid {
  display: grid;
  grid-template-columns: min-content auto min-content;
  grid-row-gap: $-spacing-16;
  grid-column-gap: $-spacing-24;
  justify-items: left;
  align-items: center;
}

.pkt-alert__noTitle {
  .pkt-alert__text {
    grid-row: 1/2;
    grid-column: 2/3;
  }

  @media (max-width: 768px) {
    .pkt-alert__text {
      grid-row: 2 / 3;
      grid-column: 1 / -1;
    }
  }
}

.pkt-alert {
  border-left: $-border-thickness solid var(--pkt-color-alert-bc);
  background-color: var(--pkt-color-alert-bg);
  color: var(--pkt-color-alert-txt);
  padding: $-spacing-16 $-spacing-24;

  display: block;

  &__title {
    grid-column: 2 / 3;
    @include get-text('pkt-txt-18-medium');
  }

  &__text {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    overflow-wrap: break-word;

    @include get-text('pkt-txt-18-light');

    p {
      margin-bottom: map.get(variables.$spacing, 'size-16');

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  &__date {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    @include get-text('pkt-txt-14-light');
  }

  &__icon {
    --fg-color: var(--pkt-color-alert-icon-fg);
    height: 2rem;
    width: 2rem;
    grid-area: icon;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  &__close {
    grid-column: 3/4;
    grid-row: 1/2;

    & svg {
      --fg-color: var(--pkt-color-alert-close-fg);
    }
  }
}

.pkt-alert--compact {
  padding: $-spacing-12 $-spacing-16;

  .pkt-alert__grid {
    gap: $-spacing-8;
  }

  .pkt-alert__icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .pkt-alert__title {
    @include get-text('pkt-txt-16-medium');
  }

  .pkt-alert__text {
    @include get-text('pkt-txt-16-light');
  }
}