.SuiteSection {
    $top-padding: 0;
    $top-gap: 12px;
    $sub-padding: 20px;
    $sub-gap: 20px;
    $sub-edit-gap: 10px;
    $sub-list-padding: 0;
    $sub-list-gap: 12px;
    $nested-padding: 10px;
    $nested-gap: 10px;

    width: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--section-padding);

    .SuiteSection-header + .SuiteSection-body {
        margin-top: var(--section-gap);

        &.ExpandableBody-collapsed {
            margin-top: 0;
        }
    }

    &-top {
        --section-gap: #{$top-gap};
        --section-padding: #{$top-padding};
        --section-radius: var(--radius-large);

        background-color: transparent;

        &-table {
            background-color: white;
            border-radius: var(--section-radius);
            box-shadow: 4px 4px 8px 2px rgba(13 36 53 / 4%);
            padding: 12px;

            &-edit {
                background-color: transparent;
                border: 1px solid var(--dividers-light-stroke, #e3e5e8);
                border-radius: 12px;
                box-shadow: none;

                .GridTable {
                    --gridtable-bg-color: var(--tables-default-gray);
                }
            }
        }
    }

    &-sub {
        --section-gap: #{$sub-gap};
        --section-padding: #{$sub-padding};
        --section-radius: var(--radius-medium);

        background-color: var(--container-fills-backgrounds-default-section, #fff);
        border-radius: 12px;
        box-shadow: 4px 4px 8px 2px rgba(13 36 53 / 4%);

        &-table {
            border: 1px solid var(--dividers-light-stroke);
            border-radius: var(--section-radius);
            padding: 8px;
        }

        &-edit {
            --section-gap: #{$sub-edit-gap};
            --section-padding: #{$sub-padding};

            background-color: transparent;
            border: 1px solid var(--dividers-light-stroke, #e3e5e8);
            border-radius: 12px;
            box-shadow: none;

            .GridTable {
                --gridtable-bg-color: var(--tables-default-gray);
            }
        }

        .GridTable {
            border-radius: 8px !important;
            box-shadow: none;
            overflow: hidden;
        }

        &-list {
            --section-padding: #{$sub-list-padding};
            --section-gap: #{$sub-list-gap};

            background-color: transparent;
            border: none;
            border-radius: 12px;
            box-shadow: none;

            .GridTable {
                border: none !important;
                border-radius: 12px !important;
                box-shadow: 4px 4px 8px 2px #0d243514;
                overflow: hidden;
            }
        }
    }

    &-nested {
        --section-gap: #{$nested-gap};
        --section-padding: #{$nested-padding};
        --section-radius: var(--radius-small);

        border-radius: 8px;
        background-color: var(--container-fills-backgrounds-nested-section, #f7f7f8);

        &-table {
            border: 1px solid var(--dividers-light-stroke);
            border-radius: var(--section-radius);
            padding: 8px;

            .GridTable {
                --gridtable-bg-color: var(--tables-default-gray);
            }
        }
    }

    &-header {
        display: flex;
        flex-direction: row;
        align-items: center;

        &-content {
            flex: 1;
            display: flex;
            align-items: center;
        }

        &-title {
            margin-bottom: 0;
        }

        &-trigger {
            margin-left: var(--padding-medium);
            align-self: center;
        }

        /* Hide default trigger if header has custom trigger. */
        &:has(.SuiteSection-header-content .SuiteSection-header-trigger) {
            > .SuiteSection-header-trigger {
                display: none;
            }
        }
    }

    &-filters {
        display: flex;
        margin-bottom: var(--section-gap);
    }

    &-divider {
        margin: 0;

        &-hr {
            border-bottom: 1px solid var(--dividers-light-stroke);
            border-radius: 1px;
        }

        .SuiteSection-top + & {
            padding: 0 $top-padding;
            background-color: transparent;
        }

        .SuiteSection-sub + & {
            padding: 0 $sub-padding;
            background-color: var(--container-fills-backgrounds-default-section, #fff);
        }

        .SuiteSection-sub-edit + & {
            padding: 0 $sub-padding;
            background-color: transparent;
        }

        .SuiteSection-nested + & {
            padding: 0 $nested-padding;
            background-color: var(--container-fills-backgrounds-nested-section, #f7f7f8);
        }
    }

    .SuiteSection-divider + & {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    & + & {
        margin-top: var(--section-gap);
    }

    &:has(+ .SuiteSection-divider) {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}