@use '~flux/components/css/mixin';

.action {
    composes: button from './base/Button.module.scss';

    height: 30px;
    width: 30px;
    padding-left: 6px;
    padding-right: 6px;
    border: 0;
    border-radius: var(--radius-half);
    box-shadow: none;

    @include mixin.hover {
        background: var(--gray-100);
    }

    &:active,
    &.isActive {
        background: var(--gray-200);
    }
}

.actionIcon {
    composes: buttonIcon from './base/Button.module.scss';

    color: var(--foreground);
    font-size: 18px;
}

.action.isDestructive .actionIcon {
    color: var(--danger-600);
}

.actionLabel {
    composes: buttonLabel from './base/Button.module.scss';

    color: var(--foreground);
}

.actionBar {
    flex-wrap: wrap;

    .separator {
        margin-top: 9px;
        margin-bottom: 9px;
    }

    @include mixin.breakpoint-up(sm) {
        > .formInput {
            max-width: 240px;
        }
    }
}

.basePaneStructure > .actionBar {
    padding: 12px 18px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-left: 0;
    border-right: 0;

    &: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);
    }
}

.actionPane {
    container: actionPane / inline-size;

    width: 100%;
}

.actionPaneGrid {
    display: grid;
    padding: 36px;
    gap: 36px;
    grid-template-columns: 1fr auto;

    @container actionPane (max-width: 540px) {
        grid-template-columns: 1fr;
    }
}

.actionPaneBody {
    position: relative;
    text-wrap: pretty;

    &:local(.paneBody) {
        padding: 0;
    }
}