/*  --------------------------------------------------------------  */
/*  BLOCK   : bar                                                   */
/*  ELEMENTS:                                                       */
/*  MODS    : -full    {full width of container}                      */
/*          : -toRight {contents are right justified}                 */
/*          : -toLeft  {contents are left justified}                  */
/*          : -tight   {minimal padding}                              */
/*  VARS    :                                                       */
/*  --------------------------------------------------------------  */
/*  TODO    : Graceful D without flexbox                            */
/*  --------------------------------------------------------------  */
.b-bar {
    display: inline-block;
    text-align: center;

    padding: .4rem;
    padding-bottom: .2rem;
}
.b-bar.-full {
    display: inline-block;
    overflow: auto;
    width: 100%
}
.b-bar > * {
    margin-bottom: .2rem;
}
.b-bar.-toRight {
    text-align: right;
}
.b-bar.-toLeft {
    text-align: left;
}
.b-bar.-tight {
    padding: .1rem;
    padding-bottom: 0;
}
.b-bar.-tight > * {
    margin-top: .1rem;
    margin-bottom: .1rem;
}

@supports (display: flex) {
    .b-bar {
        display: inline-flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    .b-bar.-full {
/*        display: flex;*/
    }
    .b-bar.-toRight {
        justify-content: flex-end;
    }
    .b-bar.-toLeft {
        justify-content: flex-start;
    }

    .b-bar > * {
        margin-right: .3rem;
    }
    .b-bar > *:last-child {
        margin-right: 0;
    }
    .b-bar.-toRight > * {
        margin-right: 0;
        margin-left: .3rem;
    }
    /*    .b-bar.-toRight > *:last-child { margin-left: 0; }*/
}
/*  ========================== END BLOCK =========================  */