@import "../variables/variables";
@import "../mixins/private/dialog-mixins";
@import "../mixins/private/token-mixins";

.toast-dialog {
    @include background-color-token(
        toast-dialog-background-color,
        color-background-information
    );
    @include border-top-left-radius-token(
        toast-dialog-border-radius,
        border-radius-100
    );
    @include border-top-right-radius-token(
        toast-dialog-border-radius,
        border-radius-100
    );

    bottom: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
    left: 0;
    max-height: 40vh;
    min-width: 320px;
    position: fixed;
    /* Setting translateY to 0 to fix a bug in safari which does a double transform */
    transform: translateY(0);
    width: 100vw;
    will-change: opacity, transform;
    z-index: 2;
    @include color-token(
        toast-dialog-foreground-color,
        color-foreground-on-information
    );
}

.toast-dialog a {
    @include color-token(
        toast-dialog-foreground-color,
        color-foreground-on-information
    );
}

.toast-dialog a:focus {
    outline: 1px auto currentColor;
}

.toast-dialog--transition {
    transition:
        opacity 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s,
        transform 0.2s cubic-bezier(0.21, 0.31, 1, 1.22) 0s;
}

.toast-dialog--show,
.toast-dialog--hide-init {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.toast-dialog--show-init,
.toast-dialog--hide {
    display: block;
    opacity: 0;
    transform: translateY(110%);
}

.toast-dialog__window {
    margin: var(--spacing-100) var(--spacing-200) var(--spacing-200);
}

.toast-dialog__header {
    align-items: center;
    display: flex;
}

/* todo: can remove h2 selector after API change in ebayui */
.toast-dialog__header h2,
.toast-dialog__title {
    margin: 0;
}

/* inherits from .icon-btn */
button.toast-dialog__close {
    align-self: flex-start;
    border: 0;
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 0;
    @include color-token(
        toast-dialog-foreground-color,
        color-foreground-on-information
    );

    &:focus {
        outline: 2px solid var(--color-foreground-on-information);
    }

    &:hover,
    &:focus {
        color: var(--color-state-primary-hover);
    }
}

button.toast-dialog__close > svg {
    fill: currentColor;
}

.toast-dialog__footer {
    display: flex;
    justify-content: flex-end;

    button::first-letter {
        text-decoration: underline;
    }

    button.btn--primary,
    button.btn--secondary {
        @include border-color-token(
            toast-dialog-foreground-color,
            color-foreground-on-accent
        );

        border-style: solid;
        border-width: 1px;
        outline-offset: 2px;
    }

    button.btn--primary {
        @include background-color-token(
            toast-dialog-foreground-color,
            color-background-primary
        );
        @include color-token(
            toast-dialog-background-color,
            color-foreground-accent
        );
    }

    button.btn--secondary {
        background-color: transparent;
        font-weight: 700;
        margin-inline-end: var(--spacing-100);
        @include color-token(
            toast-dialog-foreground-color,
            color-background-primary
        );
    }

    button.btn--primary:focus,
    button.btn--secondary:focus {
        outline: 2px solid var(--color-foreground-on-information);
    }

    button.btn--primary:not([disabled]) {
        &:focus,
        &:hover {
            background-color: var(--color-state-primary-hover);
        }

        &:active {
            background-color: var(--color-state-primary-active);
        }
    }

    button.btn--secondary:not([disabled]) {
        &:focus,
        &:hover {
            background-color: var(--color-state-accent-hover);
            @include border-color-token(
                toast-dialog-foreground-color,
                color-foreground-on-accent
            );
            @include color-token(
                toast-dialog-foreground-color,
                color-background-primary
            );
        }

        /* prettier-ignore */
        &:active {
            background-color: var(--color-state-accent-active);
            @include border-color-token(toast-dialog-foreground-color, color-foreground-on-accent);
            @include color-token(toast-dialog-foreground-color, color-background-primary);
        }
    }
}

@media (min-width: $_screen-size-SM) {
    .toast-dialog {
        @include border-radius-token(
            toast-dialog-border-radius,
            border-radius-100
        );

        bottom: var(--spacing-200);
        left: var(--spacing-200);
        max-width: 480px;
        width: auto;
    }

    .toast-dialog__window {
        margin: var(--spacing-200) var(--spacing-300) var(--spacing-300);
    }
}
