﻿@import "../../../Styles/functions.scss";

.bit-snb {
    width: 100%;
    display: flex;
    position: fixed;
    gap: spacing(1.25);
    pointer-events: none;
    flex-flow: column nowrap;
    z-index: $zindex-snackbar;
    max-width: calc(100% - spacing(1));

    @keyframes bit-snackbar-progress-animation {
        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }
}

.bit-snb-itm {
    display: flex;
    gap: spacing(1);
    width: fit-content;
    position: relative;
    pointer-events: all;
    padding: spacing(1.25);
    color: var(--bit-snb-fg);
    flex-flow: column nowrap;
    border-radius: spacing(0.375);
    justify-content: space-between;
    background-color: var(--bit-snb-bg);
}

.bit-snb-prb {
    bottom: 0;
    width: 100%;
    position: absolute;
    height: spacing(0.5);
    inset-inline-start: 0;
    animation-timing-function: linear;
    background-color: var(--bit-snb-fg);
    animation-name: bit-snackbar-progress-animation;
}

.bit-snb-hdr {
    display: flex;
    gap: spacing(1.25);
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.bit-snb-ttl {
    font-weight: 500;
    font-size: spacing(2);
    word-break: break-word;
}

.bit-snb-bdy {
    word-break: break-word;
    font-size: spacing(1.5);
}

.bit-snb-elp {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bit-snb-cbt {
    cursor: pointer;
    color: var(--bit-snb-fg);
    background-color: inherit;
    border-radius: spacing(0.375);
}

.bit-snb-pri {
    --bit-snb-bg: #{$clr-pri};
    --bit-snb-fg: #{$clr-pri-text};
}

.bit-snb-sec {
    --bit-snb-bg: #{$clr-sec};
    --bit-snb-fg: #{$clr-sec-text};
}

.bit-snb-ter {
    --bit-snb-bg: #{$clr-ter};
    --bit-snb-fg: #{$clr-ter-text};
}

.bit-snb-inf {
    --bit-snb-bg: #{$clr-inf};
    --bit-snb-fg: #{$clr-inf-text};
}

.bit-snb-suc {
    --bit-snb-bg: #{$clr-suc};
    --bit-snb-fg: #{$clr-suc-text};
}

.bit-snb-wrn {
    --bit-snb-bg: #{$clr-wrn};
    --bit-snb-fg: #{$clr-wrn-text};
}

.bit-snb-swr {
    --bit-snb-bg: #{$clr-swr};
    --bit-snb-fg: #{$clr-swr-text};
}

.bit-snb-err {
    --bit-snb-bg: #{$clr-err};
    --bit-snb-fg: #{$clr-err-text};
}

.bit-snb-pbg {
    --bit-snb-bg: #{$clr-bg-pri};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-pbg {
    --bit-snb-bg: #{$clr-bg-pri};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-sbg {
    --bit-snb-bg: #{$clr-bg-sec};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-tbg {
    --bit-snb-bg: #{$clr-bg-ter};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-pfg {
    --bit-snb-bg: #{$clr-fg-pri};
    --bit-snb-fg: #{$clr-bg-pri};
}

.bit-snb-sfg {
    --bit-snb-bg: #{$clr-fg-sec};
    --bit-snb-fg: #{$clr-bg-pri};
}

.bit-snb-tfg {
    --bit-snb-bg: #{$clr-fg-ter};
    --bit-snb-fg: #{$clr-bg-pri};
}

.bit-snb-pbr {
    --bit-snb-bg: #{$clr-brd-pri};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-sbr {
    --bit-snb-bg: #{$clr-brd-sec};
    --bit-snb-fg: #{$clr-fg-pri};
}

.bit-snb-tbr {
    --bit-snb-bg: #{$clr-brd-ter};
    --bit-snb-fg: #{$clr-fg-pri};
}


.bit-snb-tst {
    top: spacing(1);
    inset-inline: spacing(1);
}

.bit-snb-tcn {
    left: 50%;
    top: spacing(1);
    align-items: center;
    transform: translateX(-50%);
}

.bit-snb-ten {
    top: spacing(1);
    align-items: flex-end;
    inset-inline: spacing(1);
}

.bit-snb-bst {
    bottom: spacing(1);
    inset-inline: spacing(1);
}

.bit-snb-bcn {
    left: 50%;
    bottom: spacing(1);
    align-items: center;
    transform: translateX(-50%);
}

.bit-snb-ben {
    bottom: spacing(1);
    align-items: flex-end;
    inset-inline: spacing(1);
}
