.bit-dgp {
    display: flex;
    flex-wrap: wrap;
    padding: 0.25rem;
    align-items: center;
}

.bit-dgp-txt {
    margin: 0 0.5rem;
    text-align: center;
}

.bit-dgp-nav {
    gap: 0.5rem;
    display: flex;
    align-items: center;
    margin-inline-start: auto;

    button {
        border: 0;
        width: 2rem;
        height: 2rem;
        background: none center center / 1rem no-repeat;

        &[disabled] {
            opacity: 0.4;
        }

        &:not([disabled]):hover {
            background-color: var(--bit-clr-bg-pri-hover);
        }

        &:not([disabled]):active {
            background-color: var(--bit-clr-bg-pri-active);
        }
    }
}

.bit-dgp-fst::before,
.bit-dgp-lst::before {
    content: "\F371";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    font-family: 'Fabric MDL2 bit BlazorUI Extras';
}

.bit-dgp-prv::before,
.bit-dgp-nex::before {
    content: "\E96F";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    font-family: 'Fabric MDL2 bit BlazorUI Extras';
}

.bit-dgp-nex, .bit-dgp-lst {
    transform: scaleX(-1);
}
