@use 'sass:map';
@use 'ui';

@mixin zindex-tokens() {
  @each $name, $value in ui.$zindexMap {
    @include ui.def('zindex-#{$name}', $value);
  }
}

@mixin mp-tokens() {
  @each $name, $value in ui.$mediaMap {
    @include ui.media-min($name) {
      @each $mpName, $mpProp in ui.$mpMap {
        .ui-#{$mpName}-#{$name} {
          #{$mpProp}: var(--#{$mpName}-#{$name});
        }
      }
    }
  }
}

@mixin responsive-tokens($propName) {
  @each $name, $value in ui.$mediaMap {
    @include ui.media-min($name) {
      .ui-#{$propName}-#{$name} {
        @include ui.def('#{$propName}-current', var(--#{$propName}-#{$name}));

        #{$propName}: var(--#{$propName}-#{$name});
      }
    }
  }
}

@mixin paragraph-spacing-tokens() {
  @each $name, $value in ui.$mediaMap {
    @include ui.media-min($name) {
      p.ui-paragraph-spacing-#{$name} + p {
        margin-top: var(--paragraph-spacing-#{$name});
      }
    }
  }
}

@mixin anchor-tokens() {
  @include ui.define-color-token('anchor-focus-outline', ui.color('primary', $alpha: 0.5));
  @include ui.def('anchor-outline-size', ui.q(0.25));
}

@mixin border-radius-tokens() {
  @each $name, $value in ui.$borderRadiusMap {
    @include ui.def('border-radius-#{$name}', $value);
  }
}

// font size is responsive, and one size in different media queries can have different values
@mixin text-tokens() {
  // Weight
  @include ui.def('font-weight-thin', 100);
  @include ui.def('font-weight-small', 300);
  @include ui.def('font-weight-regular', 400);
  @include ui.def('font-weight-bold', 700);
  @include ui.def('font-weight-bolder', 800);
  @include ui.def('font-weight-boldest', 900);

  // Letter spacing
  @include ui.def('letter-spacing-small', -0.025em);
  @include ui.def('letter-spacing-large', 0);
  @include ui.def('letter-spacing-xlarge', 1px);

  // Family
  @include ui.def('font-family-primary', 'HelveticaNowText, sans-serif');
  @include ui.def('font-family-secondary', 'HelveticaNowDisplay, sans-serif');

  // Colors
  @include ui.define-color-token('text', ui.color('primary', 'pure'));
  @include ui.def('text-opacity-10', 0.1);
  @include ui.define-color-token('text-a10', ui.color('primary', $alpha: 0.1));
  @include ui.def('text-opacity-25', 0.25);
  @include ui.define-color-token('text-a25', ui.color('primary', $alpha: 0.25));
  @include ui.def('text-opacity-50', 0.5);
  @include ui.define-color-token('text-a50', ui.color('primary', $alpha: 0.5));
  @include ui.def('text-opacity-75', 0.75);
  @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
}

@mixin text-responsive-tokens() {
  @include ui.define-font-sizes(ui.$fontSizeMapInitial, 'initial');
  @include ui.define-font-sizes(ui.$fontSizeMapTablet, 'medium');
  @include ui.define-font-sizes(ui.$fontSizeMapDesktop, 'large');
  @include ui.define-font-sizes(ui.$fontSizeMapLargeDesktop, 'xlarge');
}

@mixin offset-tokens() {
  @each $name, $value in ui.$offsets {
    @include ui.def('offset-#{$name}', $value);
  }
}

@mixin spacing-tokens() {
  @each $name, $value in ui.$spacingMap {
    @include ui.def('spacing-#{$name}', $value);
  }
}

@mixin spacer-tokens() {
  @include ui.define-vars-from-map('spacer', ui.$spacerMapInitial, 'initial');
  @include ui.define-vars-from-map('spacer', ui.$spacerMapTablet, 'medium');
  @include ui.define-vars-from-map('spacer', ui.$spacerMapDesktop, 'large');
  @include ui.define-vars-from-map('spacer', ui.$spacerMapLargeDesktop, 'xlarge');
}

@mixin control-tokens() {
  @include ui.define-color-token('control-focus-outline', ui.color('primary', $alpha: 0.5));

  @each $name, $value in ui.$controlHeightsMap {
    @include ui.def('control-height-#{$name}', $value);
  }

  @include ui.define-vars-from-map('', ui.$controlSizeMapInitial, 'initial');
  @include ui.define-vars-from-map('', ui.$controlSizeMapTablet, 'medium');
  @include ui.define-vars-from-map('', ui.$controlSizeMapDesktop, 'large');
  @include ui.define-vars-from-map('', ui.$controlSizeMapLargeDesktop, 'xlarge');
}

// Components tokens

@mixin checkbox-tokens() {
  @include ui.define-color-token('checkbox-focus-border-color', ui.color('primary'));
  @include ui.def('checkbox-focus-border-size', ui.q(0.25));
}

@mixin switch-tokens() {
  @include ui.define-color-token('switch-focus-border-color', ui.color('primary'));
  @include ui.def('switch-focus-border-size', ui.q(0.25));
}

@mixin input-dropzone-tokens() {
  @include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
  @include ui.def('dropzone-focus-border-size', ui.q(0.25));
  @include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
  @include ui.def('dropzone-border-size', 1px);
}

@mixin input-tokens() {
  @include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: 0.4));
  @include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: 0.6));
  @include ui.define-color-token('input-text', ui.color('primary'));
  @include ui.define-color-token('input-background', ui.color('bg'));
  @include ui.def('input-border-size', 1px);
  @include ui.define-color-token('input-border', ui.color('bg-light'));
  @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: 0.1));
  @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
  @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
  @include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: 0.1));
  @include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: 0.2));
  @include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: 0.2));
  @include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: 0.1));
}

@mixin accordion-tokens() {
  @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: 0.2));
  @include ui.define-color-token('accordion-border-hover-color', ui.color('secondary', $alpha: 0.4));
  @include ui.def('accordion-border-size', 1px);
  @include ui.def('accordion-border-hover-size', ui.q(0.25));
}

@mixin select-tokens() {
  @include ui.define-color-token('interactive-list-background', ui.color('bg'));
  @include ui.define-color-token('interactive-list-item-background', transparent);
  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('secondary', $alpha: 0.2));
  @include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, 0.5));
}

@mixin icon-tokens() {
  @include ui.def('icon-big-size-small', ui.q(6));
  @include ui.def('icon-big-size-medium', ui.q(8));
  @include ui.def('icon-big-size-large', ui.q(12));
}

@mixin info-panel-tokens() {
  @include ui.def('info-panel-focus-border-size', ui.q(0.25));
  @include ui.define-color-token('info-panel-border', ui.color('primary', 950, 0.7));
  @include ui.define-color-token('info-panel-background', ui.color('primary', 950, 0.1));
  @include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, 0.2));
  @include ui.define-color-token('info-panel-error-border', ui.color('red'));
  @include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: 0.2));
  @include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: 0.4));
  @include ui.define-color-token('info-panel-success-border', ui.color('green'));
  @include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: 0.2));
  @include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: 0.4));
  @include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
  @include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: 0.2));
  @include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: 0.4));
}

@mixin tabular-tokens() {
  @include ui.define-color-token('tabular-color-dark', ui.color('primary'));
  @include ui.define-color-token('tabular-color-light', ui.color('accent'));
  @include ui.def('tabular-notification-gap', ui.q(0.75));
  @include ui.def('tabular-small-item-height', ui.q(5));
  @include ui.def('tabular-small-item-padding', ui.offset('medium'));
  @include ui.def('tabular-medium-item-height', ui.q(7.5));
  @include ui.def('tabular-medium-item-padding', ui.offset('medium'));
  @include ui.def('tabular-large-item-height', ui.q(10));
  @include ui.def('tabular-large-item-padding', ui.offset('medium'));
  @include ui.def('tabular-item-border-size', ui.q(0.5));
}

@mixin modal-tokens() {
  @include ui.define-color-token('modal-background', ui.color('bg-light'));
}

@mixin scrollable-tokens() {
  @include ui.def('scrollable-thumb-size', ui.q(1));
  @include ui.def('scrollable-thumb-x-offset', 0);
  @include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
  @include ui.define-color-token('scrollbar-track-background', ui.color('bg'));
  @include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: 0.4));
  @include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: 0.6));
  @include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: 0.8));
}

@mixin avatar-tokens() {
  @include ui.define-color-token('avatar-background', ui.color('primary'));
}

@mixin title-tokens() {
  @include ui.define-color-token('title-text', ui.color('bg'));
  @include ui.define-color-token('title-background', ui.color('primary'));
  @include ui.define-color-token('title-text-copy', ui.color('green'));
  @include ui.define-color-token('title-background-dark', ui.color('bg'));
}

@mixin button-tokens() {
  @include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: 0.5));
  @include ui.define-color-token('button-text', ui.color('primary'));
  @include ui.define-color-token('button-border', transparent);
  @include ui.define-color-token('button-background', transparent);
  @include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: 0.05));
  @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: 0.1));
  @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: 0.15));
  @include ui.define-color-token('button-active-background', transparent);

  // primary
  @include ui.define-color-token('button-primary-text', ui.color('primary'));
  @include ui.define-color-token('button-primary-border', ui.color('accent'));
  @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: 0.4));
  @include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
  @include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
  @include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
  @include ui.define-color-token('button-primary-active-text', ui.color('primary'));
  @include ui.define-color-token('button-primary-active-border', transparent);
  @include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: 0.6));
  @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: 0.4));
  @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: 0.4));
  @include ui.define-color-token('button-primary-disabled-background', transparent);

  // secondary
  @include ui.define-color-token('button-secondary-text', ui.color('primary'));
  @include ui.define-color-token('button-secondary-border', ui.color('primary'));
  @include ui.define-color-token('button-secondary-background', ui.color('primary', 'pure', 0));
  @include ui.define-color-token('button-secondary-hover-text', ui.color('bg'));
  @include ui.define-color-token('button-secondary-hover-border', ui.color('primary'));
  @include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
  @include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
  @include ui.define-color-token('button-secondary-active-border', transparent);
  @include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: 0.6));
  @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: 0.4));
  @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: 0.4));
  @include ui.define-color-token('button-secondary-disabled-background', transparent);

  // onlight
  @include ui.define-color-token('button-onlight-text', ui.color('primary'));
  @include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
  @include ui.define-color-token('button-onlight-background', ui.color('bg-dark'));
  @include ui.define-color-token('button-onlight-hover-text', ui.color('primary'));
  @include ui.define-color-token('button-onlight-hover-border', ui.color('accent'));
  @include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
  @include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
  @include ui.define-color-token('button-onlight-active-border', transparent);
  @include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', $alpha: 0.6));
  @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: 0.4));
  @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: 0.4));
  @include ui.define-color-token('button-onlight-disabled-background', transparent);

  // linked
  @include ui.define-color-token('button-linked-text', ui.color('tertiary'));
  @include ui.define-color-token('button-linked-border', transparent);
  @include ui.define-color-token('button-linked-background', transparent);
  @include ui.define-color-token('button-linked-hover-text', ui.color('accent'));
  @include ui.define-color-token('button-linked-hover-border', transparent);
  @include ui.define-color-token('button-linked-hover-background', #24293b);
  @include ui.define-color-token('button-linked-active-text', ui.color('red'));
  @include ui.define-color-token('button-linked-active-border', transparent);
  @include ui.define-color-token('button-linked-active-background', #24293b);
  @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: 0.4));
  @include ui.define-color-token('button-linked-disabled-border', transparent);
  @include ui.define-color-token('button-linked-disabled-background', transparent);

  // quicklink
  @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
  @include ui.define-color-token('button-quicklink-border', transparent);
  @include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
  @include ui.define-color-token('button-quicklink-hover-text', ui.color('primary'));
  @include ui.define-color-token('button-quicklink-hover-border', transparent);
  @include ui.define-color-token('button-quicklink-hover-background', ui.color('accent'));
  @include ui.define-color-token('button-quicklink-active-text', ui.color('primary'));
  @include ui.define-color-token('button-quicklink-active-border', transparent);
  @include ui.define-color-token('button-quicklink-active-background', ui.color('accent'));
  @include ui.define-color-token('button-quicklink-disabled-text', ui.color('primary'));
  @include ui.define-color-token('button-quicklink-disabled-border', transparent);
  @include ui.define-color-token('button-quicklink-disabled-background', ui.color('bg-light'));
}

@mixin badge-tokens() {
  @include ui.define-color-token('badge-success-text', ui.color('green'));
  @include ui.define-color-token('badge-success-background', ui.color('green', $alpha: 0.2));
  @include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: 0.4));
  @include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
  @include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: 0.2));
  @include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: 0.4));
  @include ui.define-color-token('badge-warning-text', ui.color('yellow'));
  @include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: 0.2));
  @include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: 0.4));
  @include ui.define-color-token('badge-error-text', ui.color('red'));
  @include ui.define-color-token('badge-error-background', ui.color('red', $alpha: 0.2));
  @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: 0.4));
}

@mixin separator-tokens() {
  @include ui.define-color-token('separator-text', ui.color('secondary', $alpha: 0.4));
  @include ui.define-color-token('separator-background', ui.color('secondary', $alpha: 0.2));
}

@mixin flyout-tokens() {
  @include ui.define-color-token('flyout-holder-border', ui.color('primary', 100, 0.25));
}

@mixin shadow-tokens() {
  @include ui.define-color-token('shadow-small', rgba(0, 0, 0, 0.5));
  @include ui.def('shadow-small', 0 ui.q(0.25) ui.q(0.75) ui.color-token('shadow-small'));
  @include ui.define-color-token('shadow-large', rgba(0, 0, 0, 0.5));
  @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) ui.q(0.25) ui.color-token('shadow-large'));
}

/**
 * LEGACY
 * Look for usages by searching for `ui.color-token('name')`
 */
@mixin color-tokens() {
  @include ui.define-color-token('li-marker', ui.color('main', 950, 0.75));
  @include ui.define-color-token('kbd-border', ui.color('main', 300));
  @include ui.define-color-token('kbd-background', ui.color('main', 200));
  @include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
  @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: 0.4));
  @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: 0.6));
  @include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: 0.8));
  @include ui.define-color-token('backdrop', ui.color('bg', $alpha: 0.75));
  @include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: 0.25));
  @include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: 0.5));
  @include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: 0.75));
  @include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: 0.75));

  // COMPONENTS
  @include ui.define-color-token('avatar-background', ui.color('main'));
  @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: 0.5));
  @include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
  @include ui.define-color-token('checkbox-text', ui.color('main', 950));
  @include ui.define-color-token('checkbox-border', ui.color('main', 950, 0.25));
  @include ui.define-color-token('checkbox-background', ui.color('main', 950, 0.1));
  @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, 0.05));
  @include ui.define-color-token('indicator-bright', ui.color('primary'));
  @include ui.define-color-token('indicator-dim', transparent);
  @include ui.define-color-token('island-border', ui.color('main', 50, 0.25));
  @include ui.define-color-token('island-blur-background', ui.color('main', 50, 0.75));
  @include ui.define-color-token('island-unblur-background', ui.color('main', 50, 0.95));
  @include ui.define-color-token('loaf-text', ui.color('main', 950, 0.5));
  @include ui.define-color-token('loaf-background', ui.color('main', 950, 0.05));
  @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
  @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, 0.5));
  @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, 0.05));
  @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
  @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
  @include ui.define-color-token('loaf-error-background', ui.color('error', 500, 0.15));
  @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
  @include ui.define-color-token('navlist-item-border', ui.color('main', 950, 0.1));
  @include ui.define-color-token('navlist-item-background', transparent);
  @include ui.define-color-token('navlist-item-active-border', transparent);
  @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, 0.1));
  @include ui.define-color-token('navlist-item-hover-border', transparent);
  @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, 0.2));
  @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: 0.65));
}