/**
 *
 *
 *
 *
 */

@mixin plain-ui__component__bar()
{
    .bar {
        display: flex;

        min-height: 2.8em;
        background-color: $plain-ui__primary-light;
        color: var(--white);

        .icon {
            font-size: 1.5rem;
        }

        &__start {
            justify-content: start;
        }

        &__main {
            flex-grow: 1;
        }

        &__end {
            justify-content: end;
        }

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

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

        .button {
            &:active {
                outline: none;
            }
        }
    }
}