.toolbar {
    &__label {
        @include scut-truncate;
        display: block;

        // has to be same as actions
        box-sizing: content-box;
        padding: 10px 15px;
        line-height: 24px;
        height: 24px;

        font-size: $font-size-base;
        color: $color-text;
        text-decoration: none;
        & > svg {
            display: inline-block;
            fill: $color-main;
            vertical-align: baseline;
            height: 0.8em;
            width: 0.8em * 18 / 32; // compute with correct aspect ratio of back icon (width 18 and height 32)
        }
        &.wo-touch-active {
            background: $color-touch-active;
        }

        @include respond-to(md) {
            font-size: $font-size-bigger;
        }
    }
    &__actions {
        display: flex;
        flex-direction: row;
        text-align: center;
        list-style: none;
        margin: 0;

        // has to be same as label
        box-sizing: content-box;
        padding: 10px 15px;
        line-height: 24px;
        height: 24px;

        & > li {
            flex-grow: 1;
            .btn-icon-light {
                width: 100%;
            }
        }

        @include respond-to(md) {
            justify-content: flex-end;
            & > li {
                flex-grow: 0;
                padding-left: 30px;
            }
        }
    }
}