@use "variables" as *;

.ekesto-snackbar-stack {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: $spacing-sm;
    left: $spacing-lg;
    right: $spacing-lg;
    bottom: $spacing-lg;
    z-index: $z-index-snackbar;
    pointer-events: none;

    @media screen and (min-width:$breakpoint-mobile) {
        left: auto;
        bottom: 40px;
        right: 20px; // WP footer padding
    }
}

.ekesto-snackbar-stack .components-snackbar {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: fit-content;
    max-width: 100%;
    align-self: flex-end;
    flex: 0 0 auto;
    margin: 0;
    pointer-events: auto;
}

.ekesto-snackbar .components-snackbar__content-with-icon {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
}

.ekesto-snackbar .components-snackbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ekesto-snackbar.components-snackbar {
    border-radius: 10px;
    padding: $spacing-sm $spacing-md;
}

.ekesto-snackbar.components-snackbar .components-snackbar__icon,
.ekesto-snackbar.components-snackbar .components-snackbar__icon svg {
    color: inherit;
}

.ekesto-snackbar.components-snackbar .components-snackbar__icon svg path {
    fill: currentColor;
}
