@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/file-uploader';

@mixin msk-file-uploader {
    @include file-uploader.file-uploader;
    // label
    .#{$prefix}--file--label {
        --#{$prefix}-text-primary: #{tk.$msk--color-content-primary};
        --cds-heading-compact-01-font-size: #{v.$msk--size-2};
        --cds-heading-compact-01-font-weight: 500;
        --cds-heading-compact-01-line-height: #{v.$msk--global-line-height};
    }
    // secondary label
    .#{$prefix}--label-description {
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-secondary};
        --cds-body-compact-01-font-size: #{v.$msk--size-2};
        --cds-body-compact-01-font-weight: 400;
        --cds-body-compact-01-line-height: #{v.$msk--global-line-height};
    }

    .#{$prefix}--file__container {
        .#{$prefix}--btn {
            @include m.msk-btn-default;
        }
    }

    .#{$prefix}--file-browse-btn {
        --#{$prefix}-link-primary: #{tk.$msk--color-content-link};

        outline: 1px dashed tk.$msk--color-border-action-secondary;

        &:focus,
        &:hover {
            --#{$prefix}-focus: #{tk.$msk--color-border-action-secondary-hover};

            text-decoration: none;
        }
    }

    .#{$prefix}--file__selected-file {
        background-color: tk.$msk--color-bg;
        border: 1px solid tk.$msk--color-border;
    }

    .#{$prefix}--file__state-container .#{$prefix}--file-close {
        --#{$prefix}-icon-primary: #{tk.$msk--color-content-primary};
    }

    // disabled
    .#{$prefix}--label-description--disabled {
        --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};
    }
}