@use 'sass:math';
@use '../../../assets/styles/index.scss' as *;

@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }

.root {
    --uui-flex-row-bg: transparent;
    --uui-flex-row-border: 1px solid var(--uui-divider);
    //
    --uui-flex-row-size: var(--uui-size);
    //
    // If we have an "border-box" value here, an size-24 row with a bottom border, will have 23px min-height.
    display: flex;
    flex: 0 0 auto;
    box-sizing: content-box;
    background-color: var(--uui-flex-row-bg);
    align-items: center;

    &.align-items {
        align-items: var(--uui-flex-row-align-items);
    }

    &[class*='uui-size-'] {
        min-height: var(--uui-flex-row-size);
    }

    &.justify-content {
        justify-content: var(--uui-flex-row-justify-content);
    }

    &.border-top {
        border-top: var(--uui-flex-row-border);
    }

    &.border-bottom {
        border-bottom: var(--uui-flex-row-border);
    }

    &.top-shadow {
        @include panel-top-shadow();
    }

    &.padding {
        padding-left: var(--uui-flex-row-padding);
        padding-right: var(--uui-flex-row-padding);
    }

    &.margin {
        margin: var(--uui-flex-row-margin);
    }

    &.vPadding {
        padding-top: calc(var(--uui-flex-row-v-padding) / 2);
        padding-bottom: calc(var(--uui-flex-row-v-padding) / 2);
    }

    &.column-gap {
        column-gap: var(--uui-flex-row-column-gap);
    }

    &.row-gap {
        row-gap: var(--uui-flex-row-row-gap);
    }

    &.spacing {
        >*:not(:last-child) {
            margin-right: calc(var(--uui-flex-row-spacing) / 2);
        }

        >*:not(:first-child) {
            margin-left: calc(var(--uui-flex-row-spacing) / 2);
        }
    }

    &:global(.uui-flex-row-bg-surface-main) {
        --uui-flex-row-bg: var(--uui-surface-main);
    }
}

