// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;

.notification-pill {
  @include use-typography("body-medium");

  --notification-bg-color: var(--color-background-primary);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-background-quaternary);
  --notification-padding: var(--sp-m);
  --notification-icon-color: var(--color-foreground-secondary);
  --notification-icon-margin: var(--sp-xxs);

  background-color: var(--notification-bg-color);
  border: $b-1 solid var(--notification-border-color);
  border-radius: $br-8;
  padding: var(--notification-padding);
  display: flex;
  gap: var(--sp-s);
  color: var(--notification-fg-color);

  // Targets the potential links included by the creator in the children props.
  & a {
    color: var(--color-accent-primary);
    text-decoration: none;
  }
}

.type-toast {
  padding-inline-end: var(--sp-xxxl);
}

.appearance-ghost {
  background-color: transparent;
}

.level-default {
  --notification-bg-color: var(--color-background-default);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-default);
  --notification-icon-color: var(--color-icon-default);
}

.level-info {
  --notification-bg-color: var(--color-background-info);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-info);
  --notification-icon-color: var(--color-accent-info);
}

.level-error {
  --notification-bg-color: var(--color-background-error);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-error);
  --notification-icon-color: var(--color-accent-error);
}

.level-warning {
  --notification-bg-color: var(--color-background-warning);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-warning);
  --notification-icon-color: var(--color-accent-warning);
}

.level-success {
  --notification-bg-color: var(--color-background-success);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-success);
  --notification-icon-color: var(--color-accent-success);
}

.icon {
  flex-shrink: 0;
  color: var(--notification-icon-color);
  margin-block-start: var(--notification-icon-margin);
}

.notification-pill {
  display: grid;
  max-height: 92vh;
  overflow: hidden;
}

.with-detail {
  grid-template-rows: auto 1fr;
}

.error-message {
  display: flex;
  gap: var(--sp-s);
}

.error-detail {
  list-style: none;
  padding-inline-start: var(--sp-xxl);
}

.error-detail-summary {
  list-style: none;
  cursor: pointer;
  position: relative;

  &::marker {
    display: none;
  }

  &::before {
    content: "‣";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -1.5rem;
    inline-size: $sz-16;
    text-box: trim-start cap alphabetic;
    text-align: end;
    font-size: 1lh;
    line-height: 1;
    font-weight: 700;
    color: currentcolor;
  }
}

.error-detail-content {
  padding-block-start: var(--sp-s);

  & ul {
    list-style: disc inside;
  }
}