@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
.cds-widget-value {
    background-color: var(--cds-color-background-soft);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    justify-content: center;
    width: 600px;
    //border: 1px solid var(--cds-color-border-default);


    &__icon {
        font-size: clamp(1.5rem, 5vw - 2rem, 4rem) !important;
        &::before {
                width: clamp(1.5rem, 5vw - 2rem, 4rem) !important;
                height: clamp(1.5rem, 5vw - 2rem, 4rem) !important;
            }
        color: var(--cds-color-accent-primary-main);
    }

    &__title {
        font-size: clamp(0.75rem, 4vw - 2.5rem, 1.5rem);
        color: var(--cds-color-text-subtle);
        text-align: center;
    }

    &__value {
        font-size: clamp(1.5rem, 5vw - 2rem, 5rem);
        font-weight: 700;
    }

    &__unit {
        font-size: clamp(.875rem, 4vw - 2.5rem, 1.5rem);
        color: var(--cds-color-accent-primary-main);
        text-align: center;
    }

    &--accent {
        @include mixins.cds-accent;
    }

    &--primary {
        @include mixins.cds-primary;
    }

    &--secondary {
        @include mixins.cds-secondary;
    }
/*
    &--small {
        gap: 2px;
        width: 150px;
        //height: 75px;

        .cds-widget-value__icon {
            @include mixins.cds-icon-size($cds-icon-150);
        }

        .cds-widget-value__title {
            font-size: clamp(0.5rem, 1vw, 0.875rem);
            //@include mixins.cds-paragraph-s;
        }

        .cds-widget-value__value {
            font-size: clamp(1rem, 1vw, 1.5rem);
            //@include mixins.cds-head-s;
        }

        .cds-widget-value__unit {
            font-size: .875rem;
            //@include mixins.cds-paragraph-xs;
        }
    }

    &--medium {
        gap: 4px;
        width: 300px;
       // height: 150px;

        .cds-widget-value__icon {
            @include mixins.cds-icon-size($cds-icon-200);
        }

        .cds-widget-value__title {
            //@include mixins.cds-paragraph-m;
            font-size: clamp(0.875rem, 1vw, 1rem);
        }

        .cds-widget-value__value {
            font-size: clamp(1.5rem, 1vw, 2rem);
            //@include mixins.cds-head-m;
        }

        .cds-widget-value__unit {
            @include mixins.cds-paragraph-s;
        }
    }

    &--large {
        gap: 8px;
        width: 600px;
        //height: 300px;

        .cds-widget-value__icon {
            @include mixins.cds-icon-size($cds-icon-400);
        }

        .cds-widget-value__title {
            @include mixins.cds-head-m;
        }

        .cds-widget-value__value {
            @include mixins.cds-hero-l;
        }

        .cds-widget-value__unit {
            @include mixins.cds-paragraph-xl;
        }
    }*/
}