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

.bit-bdg {
    position: relative;
    display: inline-block;

    &.bit-dis {
        --bit-bdg-poievents: none;
        --bit-bdg-cnt-clr-txt: #{$clr-fg-dis};
        --bit-bdg-cnt-clr-bg: var(--bit-bdg-clr-bg-dis);
        --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr-brd-dis);
    }
}

.bit-bdg-wrp {
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: var(--bit-bdg-alitems);
    justify-content: var(--bit-bdg-juscontent);
}

.bit-bdg-ctn {
    cursor: default;
    font-weight: 600;
    position: absolute;
    align-items: center;
    display: inline-flex;
    box-sizing: border-box;
    width: var(--bit-bdg-width);
    height: var(--bit-bdg-height);
    padding: var(--bit-bdg-padding);
    border-width: $shp-border-width;
    border-style: $shp-border-style;
    color: var(--bit-bdg-cnt-clr-txt);
    font-size: var(--bit-bdg-fontsize);
    border-radius: var(--bit-bdg-boradius);
    border-color: var(--bit-bdg-cnt-clr-brd);
    pointer-events: var(--bit-bdg-poievents);
    background-color: var(--bit-bdg-cnt-clr-bg);
}


.bit-bdg-tlf {
    --bit-bdg-alitems: flex-start;
    --bit-bdg-juscontent: flex-start;

    .bit-bdg-ctn {
        top: auto;
        left: auto;
        right: calc(100% - #{spacing(0.5)});
        bottom: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            right: calc(100% - #{spacing(1.5)});
            bottom: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-tcr {
    --bit-bdg-juscontent: center;
    --bit-bdg-alitems: flex-start;

    .bit-bdg-ctn {
        bottom: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            bottom: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-trg {
    --bit-bdg-alitems: flex-start;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        top: auto;
        right: auto;
        left: calc(100% - #{spacing(0.5)});
        bottom: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            left: calc(100% - #{spacing(1.5)});
            bottom: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-tst {
    --bit-bdg-alitems: flex-start;
    --bit-bdg-juscontent: flex-start;

    .bit-bdg-ctn {
        top: auto;
        inset-inline-start: auto;
        bottom: calc(100% - #{spacing(0.5)});
        inset-inline-end: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            bottom: calc(100% - #{spacing(1.5)});
            inset-inline-end: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-ten {
    --bit-bdg-alitems: flex-start;
    --bit-bdg-juscontent: flex-start;

    .bit-bdg-ctn {
        top: auto;
        inset-inline-end: auto;
        bottom: calc(100% - #{spacing(0.5)});
        inset-inline-start: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            bottom: calc(100% - #{spacing(1.5)});
            inset-inline-start: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-clf {
    --bit-bdg-alitems: center;

    .bit-bdg-ctn {
        right: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            right: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-ctr {
    --bit-bdg-alitems: center;
    --bit-bdg-juscontent: center
}

.bit-bdg-crg {
    --bit-bdg-alitems: center;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        left: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            left: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-cst {
    --bit-bdg-alitems: center;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        inset-inline-end: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            inset-inline-end: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-cen {
    --bit-bdg-alitems: center;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        inset-inline-start: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            inset-inline-start: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-blf {
    --bit-bdg-alitems: flex-end;
    --bit-bdg-juscontent: flex-start;

    .bit-bdg-ctn {
        left: auto;
        bottom: auto;
        top: calc(100% - #{spacing(0.5)});
        right: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            right: calc(100% - #{spacing(1.5)});
            top: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-bcr {
    --bit-bdg-alitems: flex-end;
    --bit-bdg-juscontent: center;

    .bit-bdg-ctn {
        top: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            top: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-brg {
    --bit-bdg-alitems: flex-end;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        right: auto;
        bottom: auto;
        top: calc(100% - #{spacing(0.5)});
        left: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            top: calc(100% - #{spacing(1.5)});
            left: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-bst {
    --bit-bdg-alitems: flex-end;
    --bit-bdg-juscontent: flex-start;

    .bit-bdg-ctn {
        bottom: auto;
        inset-inline-start: auto;
        top: calc(100% - #{spacing(0.5)});
        inset-inline-end: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            top: calc(100% - #{spacing(1.5)});
            inset-inline-end: calc(100% - #{spacing(1.5)});
        }
    }
}

.bit-bdg-ben {
    --bit-bdg-alitems: flex-end;
    --bit-bdg-juscontent: flex-end;

    .bit-bdg-ctn {
        bottom: auto;
        inset-inline-end: auto;
        top: calc(100% - #{spacing(0.5)});
        inset-inline-start: calc(100% - #{spacing(0.5)});
    }

    &.bit-bdg-orp {
        .bit-bdg-ctn {
            top: calc(100% - #{spacing(1.5)});
            inset-inline-start: calc(100% - #{spacing(1.5)});
        }
    }
}


.bit-bdg-fil {
    --bit-bdg-clr-bg-dis: #{$clr-bg-dis};
    --bit-bdg-clr-brd-dis: #{$clr-brd-dis};
    --bit-bdg-cnt-clr-bg: var(--bit-bdg-clr);
    --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr);
    --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-txt);
}

.bit-bdg-otl {
    --bit-bdg-cnt-clr-bg: transparent;
    --bit-bdg-clr-brd-dis: #{$clr-brd-dis};
    --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr);
    --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr);
}

.bit-bdg-txt {
    --bit-bdg-cnt-clr-bg: transparent;
    --bit-bdg-cnt-clr-brd: transparent;
    --bit-bdg-clr-brd-dis: transparent;
    --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr);
}


.bit-bdg-pri {
    --bit-bdg-clr: #{$clr-pri};
    --bit-bdg-clr-txt: #{$clr-pri-text};
}

.bit-bdg-sec {
    --bit-bdg-clr: #{$clr-sec};
    --bit-bdg-clr-txt: #{$clr-sec-text};
}

.bit-bdg-ter {
    --bit-bdg-clr: #{$clr-ter};
    --bit-bdg-clr-txt: #{$clr-ter-text};
}

.bit-bdg-inf {
    --bit-bdg-clr: #{$clr-inf};
    --bit-bdg-clr-txt: #{$clr-inf-text};
}

.bit-bdg-suc {
    --bit-bdg-clr: #{$clr-suc};
    --bit-bdg-clr-txt: #{$clr-suc-text};
}

.bit-bdg-wrn {
    --bit-bdg-clr: #{$clr-wrn};
    --bit-bdg-clr-txt: #{$clr-wrn-text};
}

.bit-bdg-swr {
    --bit-bdg-clr: #{$clr-swr};
    --bit-bdg-clr-txt: #{$clr-swr-text};
}

.bit-bdg-err {
    --bit-bdg-clr: #{$clr-err};
    --bit-bdg-clr-txt: #{$clr-err-text};
}


.bit-bdg-sm {
    --bit-bdg-height: #{spacing(2)};
    --bit-bdg-boradius: #{spacing(1)};
    --bit-bdg-padding: 0 #{spacing(0.5)};
    --bit-bdg-fontsize: #{spacing(1.25)};
}

.bit-bdg-md {
    --bit-bdg-height: #{spacing(2.5)};
    --bit-bdg-fontsize: #{spacing(1.5)};
    --bit-bdg-boradius: #{spacing(1.25)};
    --bit-bdg-padding: 0 #{spacing(0.75)};
}

.bit-bdg-lg {
    --bit-bdg-height: #{spacing(3)};
    --bit-bdg-padding: 0 #{spacing(1)};
    --bit-bdg-boradius: #{spacing(1.5)};
    --bit-bdg-fontsize: #{spacing(1.75)};
}

.bit-bdg-dot {
    --bit-bdg-padding: 0;
    --bit-bdg-boradius: 50%;
    --bit-bdg-width: #{spacing(1.125)};
    --bit-bdg-height: #{spacing(1.125)};
}
