@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/contained-list';

@mixin msk-contained-list {
    @include contained-list.contained-list;
    .#{$prefix}--contained-list {
        --#{$prefix}-border-subtle: #{tk.$msk--color-border};
        --#{$prefix}-heading-compact-01-font-weight: 500;
        --#{$prefix}-heading-compact-01-font-size: #{v.$msk--size-2};
        --#{$prefix}-body-01-font-size: #{v.$msk--size-2};
        --#{$prefix}-label-01-font-size: #{v.$msk--size-1};
        --#{$prefix}-text-primary: #{tk.$msk--color-content-primary};
        --#{$prefix}-background: #{tk.$msk--color-bg};
    }

    // "Disclosed" variant
    .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
        --#{$prefix}-layer: #{tk.$msk--color-bg-layer};
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-primary};
        --#{$prefix}-label-01-font-size: #{v.$msk--size-2};
        block-size: 2rem;
    }

    .#{$prefix}--contained-list-item--with-icon
        .#{$prefix}--contained-list-item__content {
        align-items: center;
    }
}