.toolbar {
    padding: 6px;
    contain: paint;

    :local(.separatorVertical) {
        margin-top: 6px;
        margin-bottom: 6px;
        align-self: stretch;
    }
}

.toolbarFlat {
    composes: basePane from './base/Pane.module.scss';
    composes: toolbar;

    position: relative;
    align-self: flex-start;
    box-shadow: var(--shadow-sm);
}

.toolbarFloating {
    composes: basePane from './base/Pane.module.scss';
    composes: toolbar;

    position: absolute;
    box-shadow: var(--shadow-md);
    z-index: 1;

    &.isFree {
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

    &.isTopEnd,
    &.isTopStart {
        top: 0;
        translate: 0 -50%;
    }

    &.isBottomEnd,
    &.isBottomStart {
        bottom: 0;
        translate: 0 50%;
    }

    &.isTopEnd,
    &.isBottomEnd {
        right: 18px;
    }

    &.isTopStart,
    &.isBottomStart {
        left: 18px;
    }
}

.basePaneStructure > .toolbarFlat {
    padding: 12px 15px;
    align-self: unset;
    background: var(--gray-50);
    border: 1px solid var(--surface-stroke);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;

    &:first-child {
        border-top: 0;
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
    }

    &:last-child {
        border-bottom: 0;
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
    }

    :local(.separator) {
        background: var(--surface-stroke);
    }
}