toggle-corp/react-store

@import '../../../stylesheets/utils';

:root {
    --width-toast-medium: 480px;
    --z-index-toast: 11111;
}

.toast {
    position: fixed;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 100%);
    opacity: 0;
    z-index: var(--z-index-toast);
    background-color: var(--color-foreground);
    width: var(--width-toast-medium);
    height: auto;
    overflow: hidden;
    color: var(--color-text-on-foreground);
    pointer-events: none;
    @include transition-slow;

    .container {
        .header {
            display: flex;
            align-items: flex-start;
            padding: var(--spacing-medium) var(--spacing-large);

            .heading {
                flex-grow: 1;
            }

            .close-button {
                position: absolute;
                top: var(--spacing-small);
                right: var(--spacing-medium);
                flex-shrink: 0;
                padding: 0;
                color: var(--color-text-label);
                font-size: var(--font-size-medium-alt);
            }
        }

        .main-content {
            display: flex;
            padding: var(--spacing-large) var(--spacing-medium);

            .icon {
                align-self: flex-start;
                flex-shrink: 0;
                padding: 0 var(--spacing-medium);
                font-size: var(--font-size-extra-large);
            }

            .message {
                align-self: center;
                flex-grow: 1;
                padding: 0 var(--spacing-medium);
            }

            .action-buttons {
                align-self: flex-end;
                flex-shrink: 0;
            }
        }
    }

    &.shown {
        transform: translate(-50%, 0%);
        opacity: 1;
        box-shadow: 0 (0 - var(--spacing-extra-small)) var(--radius-blur-medium)  var(--radius-spread-medium) var(--color-shadow-medium);
        pointer-events: all;
    }

    &.success {
        border: var(--width-separator-thin) solid var(--color-success);

        .container {
            .main-content {
                .icon {
                    color: var(--color-success);
                }
            }
        }
    }

    &.info {
        border: var(--width-separator-thin) solid var(--color-info);

        .container {
            .main-content {
                .icon {
                    color: var(--color-info);
                }
            }
        }
    }

    &.warning {
        box-shadow: 0 0 var(--spacing-small) var(--color-warning);

        .container {
            .main-content {
                .icon {
                    color: var(--color-warning);
                }
            }
        }
    }

    &.error {
        border: var(--width-separator-thin) solid var(--color-danger);

        .container {
            .main-content {
                .icon {
                    color: var(--color-danger);
                }
            }
        }
    }
}