@use "sass:map";
@use "../../01-core/prefix" as *;
@use "./toast.config" as config;
@use "./toast.mixins" as toast;

@layer ss.components {
    .#{$ss-prefix-module}-toast-region {
        @include toast.ss-toast-region;
    }

    // Inside `ss-l-app`, `--ss-app-overlay-top` keeps the top regions
    // below the app header.
    .#{$ss-prefix-module}-toast-region[data-position="top-right"] {
        top: calc(
            var(--ss-app-overlay-top, 0px) +
                #{map.get(config.$ss-toast-config, region-inset)}
        );
        right: map.get(config.$ss-toast-config, region-inset);
    }
    .#{$ss-prefix-module}-toast-region[data-position="top-left"] {
        top: calc(
            var(--ss-app-overlay-top, 0px) +
                #{map.get(config.$ss-toast-config, region-inset)}
        );
        left: map.get(config.$ss-toast-config, region-inset);
    }
    .#{$ss-prefix-module}-toast-region[data-position="bottom-right"] {
        bottom: map.get(config.$ss-toast-config, region-inset);
        right: map.get(config.$ss-toast-config, region-inset);
    }
    .#{$ss-prefix-module}-toast-region[data-position="bottom-left"] {
        bottom: map.get(config.$ss-toast-config, region-inset);
        left: map.get(config.$ss-toast-config, region-inset);
    }
    .#{$ss-prefix-module}-toast-region[data-position="top-center"] {
        top: calc(
            var(--ss-app-overlay-top, 0px) +
                #{map.get(config.$ss-toast-config, region-inset)}
        );
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
    }
    .#{$ss-prefix-module}-toast-region[data-position="bottom-center"] {
        bottom: map.get(config.$ss-toast-config, region-inset);
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
    }

    .#{$ss-prefix-module}-toast {
        @include toast.ss-toast;
    }

    // Parts: `__content` (with `__title`), `__actions`, and `__close` on an
    // `ss-c-close` button.
    .#{$ss-prefix-module}-toast__content {
        @include toast.ss-toast-content;
    }
    .#{$ss-prefix-module}-toast__title {
        @include toast.ss-toast-title;
    }
    .#{$ss-prefix-module}-toast__actions {
        @include toast.ss-toast-actions;
    }
    .#{$ss-prefix-module}-toast__close {
        @include toast.ss-toast-close;
    }
    // Built by `NotificationManager`: leading icon, message line, action
    // button, progress bar, and the states around adding and removing it.
    .#{$ss-prefix-module}-toast__icon {
        @include toast.ss-toast-icon;
    }
    .#{$ss-prefix-module}-toast__message {
        @include toast.ss-toast-message;
    }
    .#{$ss-prefix-module}-toast__action {
        @include toast.ss-toast-action;
    }
    .#{$ss-prefix-module}-toast__progress {
        @include toast.ss-toast-progress;
    }
    .#{$ss-prefix-module}-toast__progress-bar {
        @include toast.ss-toast-progress-bar;
    }
    .#{$ss-prefix-module}-toast[data-state="entering"],
    .#{$ss-prefix-module}-toast[data-state="leaving"] {
        @include toast.ss-toast-transient;
    }

    .#{$ss-prefix-module}-toast--debug {
        @include toast.ss-toast-variant(debug);
    }
    .#{$ss-prefix-module}-toast--info {
        @include toast.ss-toast-variant(info);
    }
    .#{$ss-prefix-module}-toast--success {
        @include toast.ss-toast-variant(success);
    }
    .#{$ss-prefix-module}-toast--warning {
        @include toast.ss-toast-variant(warning);
    }
    .#{$ss-prefix-module}-toast--danger,
    .#{$ss-prefix-module}-toast--error {
        @include toast.ss-toast-variant(danger);
    }
}