/**
 *  <div class="bar">
 *      <div class="bar__start">
 *      </div>
 *      <div class="bar__main">
 *      </div>
 *      <div class="bar__end">
 *      </div>
 *  </div>
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

.bar {
    display: flex;

    min-height: 2.8em;
    background-color: var(--background);
    color: var(--text-contrast);

    border: $border;
    border-radius: $border-radius;

    &__start {
        justify-content: start;
    }

    &__main {
        flex-grow: 1;
    }

    &__end {
        justify-content: end;
    }

    &__start, &__main, &__end {
        display: flex;
        align-self: center;
        align-items: center;
        margin-left: 0.75em;

        &:last-child {
            margin-right: 0.75em;
        }
    }
}