/* TEMPORARY SOLUTION UNTIL WE MOVE TO FIGMA VARIABLES */
@use 'sass:map';
@import './variables.scss';
@import '../src/components/elements/Button/Button.utils.scss';
@import '../src/components/elements/Button/Button.variables.scss';
@import '../src/components/elements/Input/Input.utils.scss';
@import '../src/components/elements/TextArea/TextArea.utils.scss';
@import '../src/components/elements/ToggleSwitch/ToggleSwitch.utils.scss';
@import '../src/components/modules/Select/Select.utils.scss';

.theme-legacy {
    /* SELECT */
    $select-variants: (
        /*Variant 1 - Dark*/
            (
                'color': $primary-color-900,
                'background': $primary-color-300,
                'border': $primary-color-300,
                'background-compact': $primary-color-200,
                'border-compact': $primary-color-300,
                'color-danger': $signal-red,
                'color-message-danger': $red-500,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'background-hover': $primary-color-200,
                'border-hover': $primary-color-200,
                'background-compact-hover': $primary-color-300,
                'border-compact-hover': $primary-color-300,
                'background-danger-hover': $red-400,
                'border-danger-hover': $red-400,
                'background-focus': $primary-color-300,
                'border-focus': $primary-color-400,
                'box-shadow-focus': rgba($primary-color-300, 0.4),
                'color-disabled': $primary-color-400,
                'color-label-disabled': $primary-color-400,
                'background-disabled': $primary-color-200,
                'border-disabled': $primary-color-200,
            ),
        /*Variant 2 - Light*/
            (
                'color': $secondary-color-800,
                'background': $secondary-color-200,
                'border': $secondary-color-400,
                'background-compact': $secondary-color-200,
                'border-compact': $secondary-color-400,
                'color-danger': $signal-red,
                'color-message-danger': $signal-red,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'background-hover': $secondary-color-500,
                'border-hover': $secondary-color-500,
                'background-compact-hover': $secondary-color-500,
                'border-compact-hover': $secondary-color-400,
                'background-danger-hover': $red-500,
                'border-danger-hover': $red-500,
                'background-focus': $secondary-color-200,
                'border-focus': $secondary-color-700,
                'box-shadow-focus': rgba($secondary-color-200, 0.4),
                'color-disabled': $secondary-color-600,
                'color-label-disabled': $secondary-color-600,
                'background-disabled': $secondary-color-300,
                'border-disabled': $secondary-color-300,
            )
    );

    $modes: ('dark', 'light');

    @each $select-variant in $select-variants {
        $i: index($select-variants, $select-variant);
        $mode: nth($modes, $i);
        .#{$mode} {
            @include create-token(select-outline, $green-100);
            @each $key, $value in $select-variant {
                @include create-select-token(
                    #{#{nth($base-select-variants, $i)}-#{$key}},
                    $value
                );
            }
        }
    }

    /* TOGGLE SWITCH */
    $toggle-switch-variants: (
        /*Variant 1 - Dark*/
            (
                'color': color('white'),
                'background': color('deep-blue-100'),
                'box-shadow': color('deep-blue-80'),
                'indicator': color('deep-blue-80'),
                'background-hover': color('deep-blue-90'),
                'box-shadow-hover': color('deep-blue-90'),
                'indicator-hover': color('deep-blue-50'),
                'background-focus': color('deep-blue-90'),
                'background-checked-focus': color('deep-blue-90'),
                'box-shadow-focus': color('green-100'),
                'background-checked': color('deep-blue-80'),
                'box-shadow-checked': color('deep-blue-50'),
                'indicator-checked': color('deep-blue-10'),
                'background-checked-hover': color('deep-blue-90'),
                'box-shadow-checked-hover': color('deep-blue-50'),
                'indicator-checked-hover': color('deep-blue-10'),
            ),
        /*Variant 2 - Light*/
            (
                'color': color('deep-blue-90'),
                'background': color('white'),
                'box-shadow': color('deep-blue-30'),
                'indicator': color('deep-blue-40'),
                'background-hover': color('deep-blue-20'),
                'box-shadow-hover': color('deep-blue-40'),
                'indicator-hover': color('deep-blue-50'),
                'background-focus': color('deep-blue-20'),
                'background-checked-focus': color('deep-blue-20'),
                'box-shadow-focus': color('green-100'),
                'background-checked': color('deep-blue-40'),
                'box-shadow-checked': color('deep-blue-50'),
                'indicator-checked': color('deep-blue-90'),
                'background-checked-hover': color('deep-blue-20'),
                'box-shadow-checked-hover': color('deep-blue-50'),
                'indicator-checked-hover': color('deep-blue-90'),
            )
    );

    @each $toggle-switch-variant in $toggle-switch-variants {
        $i: index($toggle-switch-variants, $toggle-switch-variant);
        $mode: nth($modes, $i);
        .#{$mode} {
            @each $key, $value in $toggle-switch-variant {
                @include create-toggle-switch-token(
                    #{#{nth($base-toggle-switch-variants, $i)}-#{$key}},
                    $value
                );
            }
        }
    }

    /* TEXT */
    @include create-token(text-color-dark-tinted, color('deep-blue-30'));
    @include create-token(text-color-dark-subtle, color('deep-blue-40'));
    @include create-token(text-color-dark-disabled, color('deep-blue-60'));

    @include create-token(text-color-light-standard, color('deep-blue-90'));
    @include create-token(text-color-light-tinted, color('deep-blue-80'));
    @include create-token(text-color-light-subtle, color('deep-blue-70'));
    @include create-token(text-color-light-disabled, color('deep-blue-50'));
    @include create-token(text-focus-box-shadow, color('green-100'));

    /* TEXTAREA */
    @include create-textarea-variant-tokens(
        'dark',
        (
            'color': $primary-color-900,
            'background': $primary-color-300,
            'border': $primary-color-300,
            'color-inline-label': $primary-color-500,
            'color-message-danger': $red-400,
            'color-placeholder': $primary-color-500,
            'color-danger': $signal-red,
            'background-danger': $red-400,
            'border-danger': $red-400,
            'color-placeholder-danger': $red-100,
            'background-hover': $primary-color-200,
            'border-hover': $primary-color-200,
            'background-focus': $primary-color-300,
            'border-focus': $primary-color-500,
            'color-disabled': $primary-color-400,
            'color-label-disabled': $primary-color-500,
            'background-disabled': $primary-color-200,
            'border-disabled': $primary-color-200,
        )
    );

    @include create-textarea-variant-tokens(
        'light',
        (
            'color': $secondary-color-800,
            'background': $secondary-color-200,
            'border': $secondary-color-400,
            'color-inline-label': $secondary-color-800,
            'color-placeholder': $secondary-color-700,
            'color-danger': $signal-red,
            'color-message-danger': $signal-red,
            'background-danger': $red-400,
            'border-danger': $red-400,
            'color-placeholder-danger': $red-100,
            'background-hover': $secondary-color-300,
            'border-hover': $secondary-color-500,
            'background-focus': $secondary-color-200,
            'border-focus': $secondary-color-800,
            'color-disabled': $secondary-color-700,
            'color-label-disabled': $secondary-color-600,
            'background-disabled': $secondary-color-300,
            'border-disabled': $secondary-color-600,
        )
    );

    /* KEBAB MENU BUTTON */
    @include create-token(icon-color, color('deep-blue-60'));
    @include create-token(icon-color-hover, color('deep-blue-80'));
    @include create-token(icon-color-active, color('deep-blue-90'));
    @include create-token(icon-color-disabled, color('deep-blue-30'));
    @include create-token(button-color-active, color('deep-blue-40'));

    /* DIVIDER */
    @include create-token(divider-color-light, color('deep-blue-20'));
    @include create-token(
        divider-color-dark,
        rgba(color-hex('white'), $alpha-10)
    );
    @include create-token(table-border-color, get-token(divider-color-light));

    /* FOCUS */
    .light {
        @include create-token(light-box-shadow-focus, color('green-40'));
        @include create-token(
            light-box-shadow-focus-border,
            color('green-100')
        );
    }

    .dark {
        @include create-token(
            dark-box-shadow-focus,
            rgba(color-hex('green-40'), 0.3)
        );
        @include create-token(dark-box-shadow-focus-border, color('green-100'));
    }

    /* INPUT */
    .dark {
        @include create-input-variant-tokens(
            'dark-standard',
            (
                'color': $primary-color-1000,
                'background': $primary-color-300,
                'border': $primary-color-300,
                'color-inline-label': $primary-color-600,
                'color-message-danger': $red-400,
                'color-placeholder': $primary-color-500,
                'color-danger': $signal-red,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'color-placeholder-danger': $red-100,
                'background-hover': $primary-color-200,
                'border-hover': $primary-color-200,
                'background-focus': $primary-color-300,
                'border-focus': $primary-color-500,
                'color-disabled': $primary-color-400,
                'color-label-disabled': $primary-color-400,
                'background-disabled': $primary-color-200,
                'border-disabled': $primary-color-200,
            )
        );

        @include create-input-variant-tokens(
            'dark-transparent',
            (
                'color': $primary-color-1000,
                'border': transparent,
                'color-inline-label': $primary-color-500,
                'color-placeholder': $primary-color-500,
                'color-danger': $signal-red,
                'color-message-danger': $red-400,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'color-placeholder-danger': $red-100,
                'background-hover': $primary-color-300,
                'border-hover': $primary-color-500,
                'background-focus': $primary-color-300,
                'border-focus': $primary-color-500,
                'color-disabled': $primary-color-400,
                'color-label-disabled': $primary-color-400,
                'background-disabled': transparent,
                'border-disabled': $primary-color-200,
            )
        );
    }

    .light {
        @include create-input-variant-tokens(
            'light-standard',
            (
                'color': $secondary-color-900,
                'background': $secondary-color-200,
                'border': $secondary-color-400,
                'color-inline-label': $secondary-color-800,
                'color-placeholder': $secondary-color-800,
                'color-danger': $signal-red,
                'color-message-danger': $signal-red,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'color-placeholder-danger': $red-100,
                'background-hover': $secondary-color-300,
                'border-hover': $secondary-color-500,
                'background-focus': $secondary-color-200,
                'border-focus': $secondary-color-800,
                'color-disabled': $secondary-color-600,
                'color-label-disabled': $secondary-color-600,
                'background-disabled': $secondary-color-300,
                'border-disabled': $secondary-color-600,
            )
        );

        @include create-input-variant-tokens(
            'light-transparent',
            (
                'color': $secondary-color-900,
                'border': transparent,
                'color-inline-label': $secondary-color-800,
                'color-placeholder': $secondary-color-600,
                'color-danger': $signal-red,
                'color-message-danger': $signal-red,
                'background-danger': $red-400,
                'border-danger': $red-400,
                'color-placeholder-danger': $red-100,
                'background-hover': $secondary-color-200,
                'border-hover': $secondary-color-800,
                'background-focus': $secondary-color-200,
                'border-focus': $secondary-color-800,
                'color-disabled': $secondary-color-600,
                'color-label-disabled': $secondary-color-600,
                'background-disabled': transparent,
                'border-disabled': $secondary-color-600,
            )
        );
    }

    /*BUTTON*/
    // Primary - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-primary',
            (
                'background': $primary-color-1000,
                'color': $primary-color-200,
                'background-hover': $primary-color-300,
                'color-hover': $primary-color-900,
                'background-active': $primary-color-300,
                'color-active': $primary-color-900,
                'background-disabled': $primary-color-200,
                'color-disabled': $primary-color-300,
            )
        );
    }

    // Primary - Light
    .light {
        @include create-button-variant-tokens(
            'light-primary',
            (
                'background': var(--color-brand-700, $secondary-color-1000),
                'color': var(--color-brand-50, $secondary-color-200),
                'background-hover': var(--color-brand-600, $secondary-color-900),
                'color-hover': var(--color-brand-50, $secondary-color-100),
                'background-active': $secondary-color-500,
                'color-active': $secondary-color-900,
                'background-disabled': $secondary-color-400,
                'color-disabled': $secondary-color-600,
            )
        );
    }

    // Secondary - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-secondary',
            (
                'background': $primary-color-100,
                'color': $primary-color-1000,
                'border': $primary-color-300,
                'background-hover': $primary-color-300,
                'color-hover': $primary-color-900,
                'border-hover': $primary-color-300,
                'background-active': $primary-color-300,
                'color-active': $primary-color-900,
                'background-disabled': transparent,
                'color-disabled': $primary-color-300,
                'border-disabled': $primary-color-300,
            )
        );
    }

    // Secondary - Light
    .light {
        @include create-button-variant-tokens(
            'light-secondary',
            (
                'background': $secondary-color-100,
                'color': var(--color-brand-700, $secondary-color-800),
                'border': var(--color-brand-200, $secondary-color-500),
                'background-hover': var(--color-brand-200, $secondary-color-500),
                'color-hover': var(--color-brand-800, $secondary-color-900),
                'background-active': $secondary-color-600,
                'color-active': $secondary-color-900,
                'background-disabled': transparent,
                'color-disabled': $secondary-color-600,
                'border-disabled': $secondary-color-500,
            )
        );
    }

    // Tertiary - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-tertiary',
            (
                'background': $primary-color-200,
                'color': $primary-color-1000,
                'background-hover': $primary-color-300,
                'color-hover': $primary-color-900,
                'background-active': $primary-color-300,
                'color-active': $primary-color-900,
                'background-disabled': $primary-color-200,
                'color-disabled': $primary-color-300,
            )
        );
    }

    // Tertiary - Light
    .light {
        @include create-button-variant-tokens(
            'light-tertiary',
            (
                'background': var(--color-brand-50, $secondary-color-400),
                'color': var(--color-brand-700, $secondary-color-900),
                'background-hover': var(--color-brand-200, $secondary-color-500),
                'color-hover': var(--color-brand-700, $secondary-color-900),
                'background-active': $secondary-color-600,
                'color-active': $secondary-color-900,
                'background-disabled': $secondary-color-400,
                'color-disabled': $secondary-color-600,
            )
        );
    }

    // Neutral - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-neutral',
            (
                'background': $primary-color-100,
                'color': $primary-color-1000,
                'border': transparent,
                'background-hover': $primary-color-800,
                'color-hover': $primary-color-100,
                'border-hover': transparent,
                'background-active': $primary-color-1000,
                'color-active': $primary-color-100,
                'border-active': transparent,
                'background-disabled': rgba($primary-color-100, 0.2),
                'color-disabled': $primary-color-300,
                'border-disabled': transparent,
            )
        );
    }

    // Neutral - Light
    .light {
        @include create-button-variant-tokens(
            'light-neutral',
            (
                'background': $secondary-color-100,
                'color': $secondary-color-800,
                'border': transparent,
                'background-hover': $secondary-color-500,
                'color-hover': $secondary-color-800,
                'border-hover': transparent,
                'background-active': $secondary-color-1000,
                'color-active': $secondary-color-100,
                'border-active': transparent,
                'background-disabled': rgba($secondary-color-100, 0.2),
                'color-disabled': $secondary-color-600,
                'border-disabled': transparent,
            )
        );
    }

    // Translucent - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-translucent',
            (
                'background': rgba(color-hex('black'), 0.65),
                'color': color('white'),
                'border': transparent,
                'background-hover': rgba(color-hex('white'), 0.8),
                'color-hover': color('black'),
                'border-hover': transparent,
                'background-active': color('white'),
                'color-active': color('black'),
                'border-active': transparent,
                'background-disabled': rgba(color-hex('black'), 0.2),
                'color-disabled': rgba(color-hex('white'), 0.5),
                'border-disabled': transparent,
            )
        );
    }

    // Translucent - Light
    .light {
        @include create-button-variant-tokens(
            'light-translucent',
            (
                'background': rgba(color-hex('white'), 0.65),
                'color': color('black'),
                'border': transparent,
                'background-hover': rgba(color-hex('black'), 0.8),
                'color-hover': color('white'),
                'border-hover': transparent,
                'background-active': color('black'),
                'color-active': color('white'),
                'border-active': transparent,
                'background-disabled': rgba(color-hex('white'), 0.2),
                'color-disabled': rgba(color-hex('black'), 0.5),
                'border-disabled': transparent,
            )
        );
    }

    // Transparent - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-transparent',
            (
                'background': transparent,
                'color': $primary-color-1000,
                'background-hover': $primary-color-300,
                'color-hover': $primary-color-900,
                'background-active': $primary-color-300,
                'color-active': $primary-color-900,
                'background-disabled': transparent,
                'color-disabled': $primary-color-300,
            )
        );
    }

    // Transparent - Light
    .light {
        @include create-button-variant-tokens(
            'light-transparent',
            (
                'background': transparent,
                'color': $secondary-color-800,
                'background-hover': $secondary-color-500,
                'color-hover': $secondary-color-900,
                'background-active': $secondary-color-500,
                'color-active': $secondary-color-900,
                'background-disabled': transparent,
                'color-disabled': $secondary-color-600,
            )
        );
    }

    // Transparent Alternative - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-transparentAlternative',
            (
                'background': transparent,
                'color': color('grey'),
                'background-hover': color('neutral-90'),
                'color-hover': color('grey'),
                'background-active': color('white'),
                'color-active': color('neutral-90'),
                'background-disabled': transparent,
                'color-disabled': $primary-color-300,
            )
        );
    }

    // Transparent Alternative - Light
    .light {
        @include create-button-variant-tokens(
            'light-transparentAlternative',
            (
                'background': transparent,
                'color': color('neutral-90'),
                'background-hover': color('neutral-90'),
                'color-hover': color('grey'),
                'background-active': color('white'),
                'color-active': color('neutral-90'),
                'background-disabled': transparent,
                'color-disabled': $secondary-color-600,
            )
        );
    }

    // Text - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-text',
            (
                'background': transparent,
                'color': $primary-color-1000,
                'background-hover': transparent,
                'color-hover': $primary-color-1000,
                'background-active': $primary-color-300,
                'color-active': $primary-color-1000,
                'background-disabled': transparent,
                'color-disabled': $primary-color-300,
            )
        );
    }

    // Text - Light
    .light {
        @include create-button-variant-tokens(
            'light-text',
            (
                'background': transparent,
                'color': $secondary-color-800,
                'background-hover': transparent,
                'color-hover': $secondary-color-800,
                'background-active': $secondary-color-300,
                'color-active': $secondary-color-800,
                'background-disabled': transparent,
                'color-disabled': $secondary-color-600,
            )
        );
    }

    // Danger - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-danger',
            (
                'background': $error-bg-color,
                'color': $error-text-color,
                'background-hover': $error-bg-color-hover,
                'color-hover': $error-text-color,
                'background-active': $error-bg-color,
                'color-active': $error-text-color,
                'background-disabled': $error-bg-color,
                'color-disabled': $error-text-color,
            )
        );
    }

    // Danger - Light
    .light {
        @include create-button-variant-tokens(
            'light-danger',
            (
                'background': $error-bg-color,
                'color': $error-text-color,
                'background-hover': $error-bg-color-hover,
                'color-hover': $error-text-color,
                'background-active': $error-bg-color,
                'color-active': $error-text-color,
                'background-disabled': $error-bg-color,
                'color-disabled': $error-text-color,
            )
        );
    }

    // Danger Bordered - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-dangerBordered',
            (
                'background': $error-text-color,
                'color': $error-bg-color,
                'border': $error-bg-color,
                'background-hover': $error-bg-color,
                'color-hover': $error-text-color,
                'border-hover': transparent,
                'background-active': $error-bg-color,
                'color-active': $error-text-color,
                'border-active': transparent,
                'background-disabled': $error-text-color,
                'color-disabled': rgba($error-bg-color, 0.5),
                'border-disabled': rgba($error-bg-color, 0.2),
            )
        );
    }

    // Danger Bordered - Light
    .light {
        @include create-button-variant-tokens(
            'light-dangerBordered',
            (
                'background': $error-text-color,
                'color': $error-bg-color,
                'border': $error-bg-color,
                'background-hover': $error-bg-color,
                'color-hover': $error-text-color,
                'border-hover': transparent,
                'background-active': $error-bg-color,
                'color-active': $error-text-color,
                'border-active': transparent,
                'background-disabled': rgba($error-text-color, 0.2),
                'color-disabled': rgba($error-bg-color, 0.5),
                'border-disabled': rgba($error-bg-color, 0.2),
            )
        );
    }

    // Success - Dark
    .dark {
        @include create-button-variant-tokens(
            'dark-success',
            (
                'background': $success-bg-color,
                'color': $success-text-color,
                'background-hover': $success-hover-color,
                'color-hover': $success-hover-color,
                'background-active': $success-bg-color,
                'color-active': $success-text-color,
                'background-disabled': rgba($success-bg-color, 0.2),
                'border-disabled': transparent,
                'color-disabled': rgba($success-text-color, 0.5),
            )
        );
    }

    // Success - Light
    .light {
        @include create-button-variant-tokens(
            'light-success',
            (
                'background': $success-bg-color,
                'color': $success-text-color,
                'background-hover': $success-hover-color,
                'color-hover': $success-text-color,
                'background-active': $success-bg-color,
                'color-active': $success-text-color,
                'background-disabled': rgba($success-bg-color, 0.2),
                'border-disabled': transparent,
                'color-disabled': rgba($success-text-color, 0.5),
            )
        );
    }

    /* ROUND INDICATOR */
    .dark {
        @include create-token(
            round-indicator-icon-dark-background-color,
            var(--color-brand-900, $secondary-color-900)
        );
        @include create-token(
            round-indicator-dark-border,
            var(--color-brand-1000, $secondary-color-1000)
        );
    }

    .light {
        @include create-token(
            round-indicator-icon-light-background-color,
            var(--color-brand-300, $secondary-color-300)
        );
    }

    /* PROGRESS BAR */
    .light,
    .dark {
        @include create-token(
            progress-bar-bar-color-primary,
            color('deep-blue-100')
        );
    }

    /* FILEUPLOAD */
    .light,
    .dark {
        @include create-token(file-upload-focus-start, color('green-100'));
        @include create-token(file-upload-focus-end, color('green-40'));
    }

    [data-focus-visible-added] {
        @include create-token(el-focus, color('green-100'));
    }
}