//

// @import "@material/animation/functions";
// @import "@material/rtl/mixins";
// @import "@material/theme/mixins";
// @import "@material/typography/mixins";

$snackbar-background-color: #323232;
$snackbar-foreground-color: #FFFFFF;
$snackbar-secondary-color: #80CBC4;
$snackbar-tablet-breakpoint: 600px;


.snackbar {
    align-items: center;
    background-color: $snackbar-background-color;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    left: 50%;
    padding-left: 24px;
    padding-right: 24px;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 100%);
    transition: transform 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);
    will-change: transform;

    @media (max-width: ($snackbar-tablet-breakpoint - 1)) {
        left: 0;
        transform: translate(0, 100%);
        width: calc(100% - 48px);
    }

    @media (min-width: $snackbar-tablet-breakpoint) {
        border-radius: 2px;
        max-width: 568px;
        min-width: 288px;
    }

    &-align-start {
        @media (min-width: $snackbar-tablet-breakpoint) {
            bottom: 24px;
            left: 24px;
            right: initial;
            transform: translate(0, 200%);

            [dir="rtl"] &,
            &[dir="rtl"] {
                left: initial;
                right: 24px;
            }
        }

        @media (max-width: ($snackbar-tablet-breakpoint - 1)) {
            bottom: 0;
            left: 0;
            transform: translate(0, 100%);
            width: calc(100% - 48px);
        }
    }

    &-active {
        pointer-events: auto;
        transform: translate(0);
        transition: transform 0.25s 0ms cubic-bezier(0, 0, 0.2, 1);

        &:not(.snackbar-align-start) {
            transform: translate(-50%, 0);

            @media (max-width: ($snackbar-tablet-breakpoint - 1)) {
                bottom: 0;
                left: 0;
                transform: translate(0);
                width: calc(100% - 48px);
            }
        }
    }

    &-action-on-bottom {
        flex-direction: column;
    }

    &-action-on-bottom &-text {
        margin-right: inherit;
    }

    &-action-on-bottom &-action-wrapper {
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 8px;
        margin-left: auto;
        margin-right: 0;
        margin-top: -12px;

        [dir="rtl"] &,
        &[dir="rtl"] {
            margin-left: 0;
            margin-right: auto;
        }
    }

    &-text {
        @include typography-body-1;

        align-items: center;
        color: $snackbar-foreground-color;
        display: flex;
        height: 48px;
        margin-left: 0;
        margin-right: auto;
        opacity: 0;
        transition: opacity 0.3s 0ms cubic-bezier(0.4, 0, 1, 1);

        [dir="rtl"] .snackbar &,
        .snackbar[dir="rtl"] & {
            margin-left: auto;
            margin-right: 0;
        }
    }

    &-multiline &-text {
        height: 80px;
    }

    &-multiline#{&}-action-on-bottom &-text {
        margin: 0;
    }

    &-action-button {
        @include typography-button-text();

        background-color: transparent;
        border: none;
        color: $snackbar-secondary-color;
        opacity: 0;
        outline: none;
        padding: 0;
        transition: opacity 0.3s 0ms cubic-bezier(0.4, 0, 1, 1);
        user-select: none;
        visibility: hidden;

        -webkit-appearance: none;

        &:hover {
            cursor: pointer;
        }

        &::-moz-focus-inner {
            border: 0;
        }

        &:not([aria-hidden]) {
            visibility: inherit;
        }
    }

    &-active &-text,
    &-active &-action-button:not([aria-hidden]) {
        opacity: 1;
        transition: opacity 0.3s 0ms cubic-bezier(0.4, 0, 1, 1);
    }
}


// Custom overrides.
.edit-bar-adjust {
    .snackbar-active:not(.snackbar-align-start) {
        transform: translate(-50%, -48px);
    }
}

.snackbar-text {
    margin-right: 25px;
}
