@use 'sass:map';
@use 'colors';

@mixin bb-theme($options) {
    $default-options: (
        'primary-color': hsl(212, 80%, 42%),
        'destructive-color': hsl(0, 80%, 42%)
    );

    $options: map.deep-merge($default-options, $options);

    :root {
        @include colors.generate-color-palette(map.get($options, 'primary-color'), 'bb-primary-color');
        @include colors.generate-color-palette(map.get($options, 'destructive-color'), 'bb-destructive-color');

        // Button.
        --bb-button-color: var(--bb-primary-color-700);
        --bb-button-hover-background-color: var(--bb-primary-color-50);
        --bb-button-focus-border-color: var(--bb-primary-color-700);
        --bb-button-focus-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-button-active-background-color: var(--bb-primary-color-100);
        --bb-button-disabled-opacity: 0.4;

        // Button secondary.
        --bb-button-secondary-color: var(--bb-primary-color-700);
        --bb-button-secondary-background-color: transparent;
        --bb-button-secondary-border-color: var(--bb-primary-color-700);
        --bb-button-secondary-hover-background-color: var(--bb-primary-color-50);
        --bb-button-secondary-focus-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-button-secondary-active-background-color: var(--bb-primary-color-100);

        // Button primary.
        --bb-button-primary-color: white;
        --bb-button-primary-border-color: var(--bb-primary-color-700);
        --bb-button-primary-background-color: var(--bb-primary-color-550);
        --bb-button-primary-hover-background-color: var(--bb-primary-color-600);
        --bb-button-primary-focus-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-button-primary-active-background-color: var(--bb-primary-color-650);

        // Button destructive.
        --bb-button-destructive-color: white;
        --bb-button-destructive-border-color: var(--bb-destructive-color-700);
        --bb-button-destructive-background-color: var(--bb-destructive-color-550);
        --bb-button-destructive-hover-background-color: var(--bb-destructive-color-600);
        --bb-button-destructive-focus-box-shadow: 0 0 0 0.1875rem var(--bb-destructive-color-100);
        --bb-button-destructive-active-background-color: var(--bb-destructive-color-650);

        // General controls.
        --bb-form-label-color: hsl(0, 0%, 32%);
        --bb-form-label-font-weight: 400;
        --bb-form-label-font-size: 0.875rem;
        --bb-form-label-required-color: hsla(2, 58%, 48%, 1);

        // Controls.
        --bb-control-border-color: hsla(213, 8%, 74%, 1);
        --bb-control-focus-border-color: hsla(213, 8%, 50%, 1);
        --bb-control-error-color: hsl(0, 80%, 25%);
        --bb-control-error-placeholder-color: hsl(0, 80%, 70%);
        --bb-control-error-border-color: hsl(0, 80%, 30%);
        --bb-control-error-background-color: hsl(0, 80%, 90%);
        --bb-control-error-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem hsl(0, 80%, 90%);
        --bb-control-disabled-color: hsla(0, 0%, 50%, 1);
        --bb-control-disabled-background-color: hsla(0, 0%, 90%, 1);

        // Checkbox.
        --bb-checkbox-border-radius: 0.25rem;
        --bb-checkbox-border-color: var(--bb-control-border-color);
        --bb-checkbox-active-border-color: var(--bb-primary-color-550);
        --bb-checkbox-background-color: var(--bb-primary-color-550);
        --bb-checkbox-outline-color: var(--bb-primary-color-100);

        // Radio button.
        --bb-radio-border-color: var(--bb-control-border-color);
        --bb-radio-active-border-color: var(--bb-primary-color-550);
        --bb-radio-indicator-color: var(--bb-primary-color-550);
        --bb-radio-outline-color: var(--bb-primary-color-100);

        // Form control
        --bb-form-control-border-radius: 0.5rem;
        --bb-form-control-background-color: white;
        --bb-form-control-border-color: var(--bb-control-border-color);
        --bb-form-control-focus-border-color: var(--bb-control-focus-border-color);
        --bb-form-control-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
        --bb-form-control-focus-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem var(--bb-primary-color-100);

        // Select
        --bb-select-border-radius: var(--bb-form-control-border-radius);
        --bb-select-background-color: var(--bb-form-control-background-color);
        --bb-select-border-color: var(--bb-control-border-color);
        --bb-select-focus-border-color: var(--bb-control-focus-border-color);
        --bb-select-box-shadow: var(--bb-form-control-box-shadow);
        --bb-select-focus-box-shadow: var(--bb-form-control-focus-box-shadow);

        // File picker.
        --bb-file-picker-color: var(--bb-primary-color-550);
        --bb-file-picker-border-radius: var(--bb-form-control-border-radius);
        --bb-file-picker-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-file-picker-border-color: var(--bb-control-border-color);
        --bb-file-picker-background-color: var(--bb-form-control-background-color);

        // Multi file control.
        --bb-multi-file-control-color: var(--bb-primary-color-550);
        --bb-multi-file-control-border-color: var(--bb-control-border-color);
        --bb-multi-file-control-focus-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-multi-file-control-focus-border-color: var(--bb-control-focus-border-color);
        --bb-multi-file-control-border-radius: var(--bb-form-control-border-radius);
        --bb-multi-file-control-background-color: white;
        --bb-multi-file-control-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);

        // Image control.
        --bb-image-control-hover-color: var(--bb-primary-color-550);
        --bb-image-control-delete-color: #940300;

        // Collections pager.
        --bb-collections-pager-color: var(--bb-primary-color-550);
        --bb-collections-pager-outline-color: var(--bb-primary-color-550);
        --bb-collections-pager-border-color: var(--bb-control-border-color);
        --bb-collections-pager-hover-background-color: var(--bb-primary-color-50);
        --bb-collections-pager-focus-box-shadow: 0 0 0 0.1875rem var(--bb-primary-color-100);
        --bb-collections-pager-active-background-color: var(--bb-primary-color-100);

        // Collections table label.
        --bb-collections-table-label-color: var(--bb-primary-color-550);
        --bb-collections-table-loader-color: var(--bb-primary-color-500);

        // Spinner.
        --bb-spinner-color: var(--bb-primary-color-500);
        --bb-spinner-background-color: hsl(210, 18%, 96%);

        // Dialog.
        --bb-dialog-border-radius: 0.5rem;
    }
}

@mixin bb-legacy-theme($primary-color) {
    @include bb-theme(('primary-color': $primary-color));

    :root {
        // Legacy button styling.
        --bb-button-border-radius: 0.25rem;
        --bb-button-color: #2d3c4d;
        --bb-button-secondary-background-color: white;
        --bb-button-secondary-border-color: #d4d8e1;
        --bb-button-secondary-hover-background-color: hsla(60, 0%, 99%, 1);
        --bb-button-secondary-active-background-color: hsla(60, 0%, 99%, 1);
        --bb-button-secondary-focus-box-shadow: 0 0 0 0.1875rem hsla(222, 6%, 91%, 0.5);

        // Legacy general control styling.
        --bb-form-label-color: #111111;
        --bb-form-label-font-weight: 500;
        --bb-form-label-font-size: 1rem;

        // Legacy controls.
        --bb-control-error-box-shadow: 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1),
        0 0 0 0.1875rem hsl(0, 80%, 90%);

        // Legacy form control styling.
        --bb-form-control-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
        --bb-form-control-focus-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);
        --bb-form-control-border-color: hsla(213, 8%, 74%, 1);
        --bb-form-control-focus-border-color: hsla(213, 8%, 74%, 1);
        --bb-form-control-border-radius: 0.1875rem;
        --bb-form-control-background-color: hsla(300, 100%, 99%, 1);

        // Legacy select styling.
        --bb-select-border-radius: 0.1875rem;
        --bb-select-background-color: hsla(300, 100%, 99%, 1);
        --bb-select-border-color: hsla(213, 8%, 74%, 1);
        --bb-select-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
        --bb-select-focus-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1), 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);

        // Legacy file picker styling.
        --bb-file-picker-box-shadow: 0 0 0 0.1875rem hsla(211, 100%, 50%, 0.2);
        --bb-file-picker-border-radius: 0.1875rem;
        --bb-file-picker-border-color: hsla(213, 8%, 74%, 1);
        --bb-file-picker-background-color: hsla(300, 100%, 99%, 1);

        // Legacy dialog styling.
        --bb-dialog-border-radius: 0.25rem;

        // Legacy multi file control.
        --bb-multi-file-control-color: var(--bb-primary-color-550);
        --bb-multi-file-control-border-color: hsla(213, 8%, 74%, 1);
        --bb-multi-file-control-focus-border-color: var(--bb-control-focus-border-color);
        --bb-multi-file-control-border-radius: 0.1875rem;
        --bb-multi-file-control-background-color: hsla(300, 100%, 99%, 1);
        --bb-multi-file-control-box-shadow: inset 0 0.1875rem hsla(213, 8%, 74%, 0.2), 0 0.375rem 0.375rem -0.375rem hsla(0, 0%, 0%, 0.1);
    }
}