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

pkt-messagebox {
  display: block;
}

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

// default is "info"
.pkt-messagebox {
  --pkt-color-messagebox-bc: var(--pkt-color-border-beige);
  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-beige);
  --pkt-color-messagebox-txt: var(--pkt-color-text-body-dark);
}

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

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

.pkt-messagebox--blue {
  --pkt-color-messagebox-bc: var(--pkt-color-border-blue);
  --pkt-color-messagebox-bg: var(--pkt-color-surface-default-light-blue);
}

.pkt-messagebox {
  padding: $-messagebox-spacing $-messagebox-spacing $-messagebox-spacing
    calc($-messagebox-spacing - $-border-thickness);

  display: grid;
  grid-template-areas: 'title close' 'text text';
  grid-template-columns: minmax(0, 1fr) 40px;
  overflow-wrap: break-word;
  overflow: hidden;

  &:not(:has(.pkt-messagebox__title)):has(.pkt-messagebox__close) {
    grid-template: 'text close';
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  border-left: $-border-thickness solid var(--pkt-color-messagebox-bc);
  background-color: var(--pkt-color-messagebox-bg);
  color: var(--pkt-color-messagebox-txt);

  &__title {
    grid-area: title;
    margin: 0 0 $-messagebox-spacing 0;
    @include get-text('pkt-txt-24-medium');
  }

  &__text {
    grid-area: text;
    margin: 0;
    @include get-text('pkt-txt-18-light');

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

      &:last-child {
        margin-block-end: 0;
      }
    }
  }

  &__close {
    grid-area: close;

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

// Compact variant
.pkt-messagebox--compact {
  padding: $-messagebox-spacing-compact $-messagebox-spacing $-messagebox-spacing-compact
    calc($-messagebox-spacing - $-border-thickness);
  .pkt-messagebox__title {
    @include get-text('pkt-txt-16-medium');
    margin-block-end: $-messagebox-spacing-compact;
  }

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

  .pkt-messagebox__close > .pkt-btn {
    top: -15px;
  }
}