@use "config" as *;
@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/tokens" as *;

$toast-tokens: () !default;

// scss-docs-start toast-tokens
// stylelint-disable custom-property-no-missing-var-function
// stylelint-disable-next-line scss/dollar-variable-default
$toast-tokens: defaults(
  (
    --toast-zindex: #{$zindex-toast},
    --toast-padding-x: 1rem,
    --toast-padding-y: .75rem,
    --toast-spacing: #{$container-padding-x},
    --toast-max-width: 350px,
    --toast-font-size: var(--font-size-sm),
    --toast-color: null,
    --toast-bg: var(--bg-body),
    --toast-border-width: var(--border-width),
    --toast-border-color: var(--border-color-translucent),
    --toast-border-radius: null,
    --toast-box-shadow: var(--box-shadow),
    --toast-header-color: var(--fg-3),
    --toast-header-bg: var(--bg-1),
    --toast-header-border-color: var(--border-color-translucent),
  ),
  $toast-tokens
);
// stylelint-enable custom-property-no-missing-var-function
// scss-docs-end toast-tokens

@layer components {
  .toast {
    @include tokens($toast-tokens);

    display: flex;
    flex-direction: column;
    width: var(--toast-max-width);
    max-width: 100%;
    overflow: hidden;
    font-size: var(--toast-font-size);
    color: var(--toast-color, var(--fg-body));
    pointer-events: auto;
    background-color: var(--toast-bg);
    background-clip: padding-box;
    border: var(--toast-border-width) solid var(--theme-border, var(--toast-border-color));
    box-shadow: var(--toast-box-shadow);
    @include border-radius(var(--toast-border-radius, var(--border-radius-lg)));

    &.showing {
      opacity: 0;
    }

    &:not(.show) {
      display: none;
    }
  }

  .toast-container {
    --toast-zindex: #{$zindex-toast};

    position: absolute;
    z-index: var(--toast-zindex);
    width: max-content;
    max-width: 100%;
    pointer-events: none;

    > :not(:last-child) {
      margin-bottom: var(--toast-spacing);
    }
  }

  .toast-header {
    display: flex;
    align-items: center;
    padding: var(--toast-padding-y) var(--toast-padding-x);
    color: var(--theme-fg-emphasis, var(--toast-header-color));
    background-color: var(--theme-bg-subtle, var(--toast-header-bg));
    // background-clip: padding-box;
    border-block-end: var(--toast-border-width, var(--border-width)) solid var(--theme-border, var(--toast-header-border-color, var(--border-color-translucent)));

    .btn-close {
      margin-inline-start: calc(.5 * var(--toast-padding-x));
      margin-inline-end: calc(-.25 * var(--toast-padding-x));
      color: inherit;
    }
  }

  .toast-translucent {
    backdrop-filter: blur(5px) saturate(180%);
  }

  .toast-body {
    padding: var(--toast-padding-x);
    word-wrap: break-word;
  }
}