@use "sass:map";
@use 'theme-variables' as *;

@mixin chip-color($bg-color, $color) {
  background: $bg-color;
  color: $color;
}

@mixin apply-chip-states($states) {
  @include chip-color(map.get(map.get($states, 'default'), 'bg'), map.get(map.get($states, 'default'), 'color'));

  &:hover {
    @include chip-color(map.get(map.get($states, 'hover'), 'bg'), map.get(map.get($states, 'hover'), 'color'));
  }

  &.sf-focused {
    @include chip-color(map.get(map.get($states, 'focused'), 'bg'), map.get(map.get($states, 'focused'), 'color'));

    &.sf-active {
      @include chip-color(map.get(map.get($states, 'focused.active'), 'bg'), map.get(map.get($states, 'focused.active'), 'color'));
    }
  }

  &.sf-active {
    @include chip-color(map.get(map.get($states, 'active'), 'bg'), map.get(map.get($states, 'active'), 'color'));
  }

  &:active {
    @include chip-color(map.get(map.get($states, 'pressed'), 'bg'), map.get(map.get($states, 'pressed'), 'color'));
  }

  &:focus-visible {
    background: map.get(map.get($states, 'focus-visible'), 'bg');
    color: map.get(map.get($states, 'focus-visible'), 'color');
    border-color: map.get(map.get($states, 'focus-visible'), 'border');
  }
}

@mixin apply-chip-variant-states($states) {
  background: map.get(map.get($states, 'default'), 'bg');

  &:hover {
    background: map.get(map.get($states, 'hover'), 'bg');
    color: map.get(map.get($states, 'hover'), 'color');
    border-color: map.get(map.get($states, 'hover'), 'border');
  }

  &.sf-focused {
    background: map.get(map.get($states, 'focused'), 'bg');
    color: map.get(map.get($states, 'focused'), 'color');
    border-color: map.get(map.get($states, 'active'), 'border');
  }

  &:focus-visible {
    background: map.get(map.get($states, 'focus-visible'), 'bg');
    color: map.get(map.get($states, 'focus-visible'), 'color');
    border-color: map.get(map.get($states, 'focus-visible'), 'border');
  }

  &.sf-focused.sf-active,
  &.sf-active,
  &:active {
    background: map.get(map.get($states, 'active'), 'bg');
    color: map.get(map.get($states, 'active'), 'color');
    border-color: map.get(map.get($states, 'active'), 'border');
  }
}

@mixin chip-disabled-states(
  $variant, 
  $filled-bg, 
  $filled-border, 
  $filled-color,
  $outlined-bg, 
  $outlined-border, 
  $outlined-color
) {
  .sf-chip {
    &.sf-#{$variant} {
      &.sf-disabled {
      background: $filled-bg;
      border-color: $filled-border;
      color: $filled-color;
      }
      &.sf-outline.sf-disabled {
        background: $outlined-bg;
        border-color: $outlined-border;
        color: $outlined-color;
      }
    }
  }
}
@mixin chip-focus-shadow($variant, $focus-shadow) {
  .sf-chip.sf-#{$variant} {
    &:focus-visible {
      box-shadow: $focus-shadow;
    }
  }
}
@include export-module('chip-theme') {
  $chip-variants: (
    'default': ('default': ('bg': map.get(map.get($chip-colors, 'default'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'default'), 'hover', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'hover', 'font'), 'border': map.get(map.get($chip-colors, 'default'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'default'), 'focus', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'focus', 'font')),
      'active': ('bg': map.get(map.get($chip-colors, 'default'), 'active', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'active', 'font'), 'border': map.get(map.get($chip-colors, 'default'), 'active', 'border')),
      'pressed': ('bg': map.get(map.get($chip-colors, 'default'), 'pressed', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'pressed', 'font'), 'border': map.get(map.get($chip-colors, 'default'), 'active', 'border')),
      'focused.active': ('bg': map.get(map.get($chip-colors, 'default'), 'focus-active', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'focus-active', 'font')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'default'), 'focus-visible', 'bg'), 'color': map.get(map.get($chip-colors, 'default'), 'default', 'font'), 'border': map.get(map.get($chip-colors, 'default'), 'focus-visible', 'border'))),
    'primary': ('default': ('bg': map.get(map.get($chip-colors, 'primary'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'primary'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'primary'), 'hover', 'bg'), 'border': map.get(map.get($chip-colors, 'primary'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'primary'), 'focus', 'bg')),
      'active': ('bg': map.get(map.get($chip-colors, 'primary'), 'active', 'bg'), 'border': map.get(map.get($chip-colors, 'primary'), 'active', 'border')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'primary'), 'focus', 'bg'), 'border': map.get(map.get($chip-colors, 'primary'), 'hover', 'border'))),
    'success': ('default': ('bg': map.get(map.get($chip-colors, 'success'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'success'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'success'), 'hover', 'bg'), 'border': map.get(map.get($chip-colors, 'success'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'success'), 'focus', 'bg')),
      'active': ('bg': map.get(map.get($chip-colors, 'success'), 'active', 'bg'), 'border': map.get(map.get($chip-colors, 'success'), 'active', 'border')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'success'), 'focus', 'bg'), 'border': map.get(map.get($chip-colors, 'success'), 'hover', 'border'))),
    'info': ('default': ('bg': map.get(map.get($chip-colors, 'info'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'info'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'info'), 'hover', 'bg'), 'border': map.get(map.get($chip-colors, 'info'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'info'), 'focus', 'bg')),
      'active': ('bg': map.get(map.get($chip-colors, 'info'), 'active', 'bg'), 'border': map.get(map.get($chip-colors, 'info'), 'active', 'border')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'info'), 'focus', 'bg'), 'border': map.get(map.get($chip-colors, 'info'), 'hover', 'border'))),
    'warning': ('default': ('bg': map.get(map.get($chip-colors, 'warning'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'warning'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'warning'), 'hover', 'bg'), 'color': map.get(map.get($chip-colors, 'warning'), 'hover', 'font'), 'border': map.get(map.get($chip-colors, 'warning'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'warning'), 'focus', 'bg'), 'color': map.get(map.get($chip-colors, 'warning'), 'default', 'font')),
      'active': ('bg': map.get(map.get($chip-colors, 'warning'), 'active', 'bg'), 'border': map.get(map.get($chip-colors, 'warning'), 'active', 'border')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'warning'), 'hover', 'bg'), 'color': map.get(map.get($chip-colors, 'warning'), 'hover', 'font'), 'border': map.get(map.get($chip-colors, 'warning'), 'hover', 'border'))),
    'error': ('default': ('bg': map.get(map.get($chip-colors, 'error'), 'default', 'bg'), 'color': map.get(map.get($chip-colors, 'error'), 'default', 'font')),
      'hover': ('bg': map.get(map.get($chip-colors, 'error'), 'hover', 'bg'), 'border': map.get(map.get($chip-colors, 'error'), 'hover', 'border')),
      'focused': ('bg': map.get(map.get($chip-colors, 'error'), 'focus', 'bg')),
      'active': ('bg': map.get(map.get($chip-colors, 'error'), 'active', 'bg'), 'border': map.get(map.get($chip-colors, 'error'), 'active', 'border')),
      'focus-visible': ('bg': map.get(map.get($chip-colors, 'error'), 'focus', 'bg'), 'border': map.get(map.get($chip-colors, 'error'), 'hover', 'border')))
  );

$chip-outline-variants: (
  'default': ('default': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'active', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'active', 'font')),
    'pressed': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'pressed', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'pressed', 'font')),
    'focused.active': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'focus-active', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'focus-active', 'font')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'default'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'default'), 'default', 'font'))),
  'primary': ('default': ('bg': map.get(map.get($chip-outline-colors, 'primary'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'primary'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'primary'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'primary'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'primary'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'primary'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'primary'), 'active', 'bg')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'primary'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'primary'), 'default', 'font'))),
  'success': ('default': ('bg': map.get(map.get($chip-outline-colors, 'success'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'success'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'success'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'success'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'success'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'success'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'success'), 'active', 'bg')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'success'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'success'), 'default', 'font'))),
  'info': ('default': ('bg': map.get(map.get($chip-outline-colors, 'info'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'info'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'info'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'info'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'info'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'info'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'info'), 'active', 'bg')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'info'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'info'), 'default', 'font'))),
  'warning': ('default': ('bg': map.get(map.get($chip-outline-colors, 'warning'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'warning'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'warning'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'warning'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'warning'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'warning'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'warning'), 'active', 'bg')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'warning'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'warning'), 'default', 'font'))),
  'error': ('default': ('bg': map.get(map.get($chip-outline-colors, 'error'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'error'), 'default', 'font')),
    'hover': ('bg': map.get(map.get($chip-outline-colors, 'error'), 'hover', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'error'), 'hover', 'font')),
    'focused': ('bg': map.get(map.get($chip-outline-colors, 'error'), 'focus', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'error'), 'focus', 'font')),
    'active': ('bg': map.get(map.get($chip-outline-colors, 'error'), 'active', 'bg')),
    'focus-visible': ('bg': map.get(map.get($chip-outline-colors, 'error'), 'default', 'bg'), 'color': map.get(map.get($chip-outline-colors, 'error'), 'default', 'font')))
);

.sf-chip-avatar {
  background-color: $chip-avatar-bg-color;
  color: $chip-avatar-color;
}

.sf-chip {
  border-color: $chip-default-border-color;
  &.sf-disabled {
    opacity: 1;
  }

  &.sf-outline {
    border-width: 1px;
  }
}

.sf-chip-selection .sf-chip {

  &.sf-active,
  &.sf-active.sf-focused {
    background-color: $chip-selection-bg-color;
  }
}

.sf-chip {
  @include apply-chip-states(map.get($chip-variants, 'default'));

  @each $variant in ('primary', 'success', 'info', 'warning', 'error') {
    &.sf-#{$variant} {
      color: map.get(map.get($chip-colors, $variant), 'default', 'font');
      border-color: map.get(map.get($chip-colors, $variant), 'default', 'bg');

      .sf-chip-avatar {
        background-color: map.get(map.get($chip-colors, $variant), 'default', 'avatar-bg');
      }

      @include apply-chip-variant-states(map.get($chip-variants, $variant));
    }
  }

  &.sf-outline {
    @include apply-chip-states(map.get($chip-outline-variants, 'default'));

    @each $variant in ('primary', 'success', 'info', 'warning', 'error') {
      &.sf-#{$variant} {
        color: map.get(map.get($chip-outline-colors, $variant), 'default', 'font');
        border-color: map.get(map.get($chip-outline-colors, $variant), 'default', 'font');

        .sf-chip-avatar {
          color: map.get(map.get($chip-outline-colors, $variant), 'default', 'avatar-font');
        }

        @include apply-chip-variant-states(map.get($chip-outline-variants, $variant));
      }
    }
  }

  &.sf-disabled {
    color: $chip-disabled-text-color;
    background-color: $chip-disabled-filled-bg;
    border-color: $chip-disabled-border-color;

    .sf-chip-avatar {
      color: $chip-disabled-text-color;
    }
  }

  &.sf-outline {
    &.sf-disabled {
      color: $chip-disabled-outline-text-color;
      background: $chip-disabled-outline-bg;
      border-color: $chip-disabled-border-color;

      .sf-chip-avatar {
        background-color: $chip-disabled-filled-bg;
        color: $chip-disabled-outline-text-color;
      }
    }
  }

  &.sf-chip-variant-disabled {
    background: $chip-disabled-filled-bg;
  }

  &.sf-chip-variant-disabled .sf-chip-avatar {
    background-color: $chip-disabled-filled-bg;
  }
}
@include chip-disabled-states('primary', $chip-primary-disabled-bg-color, $chip-primary-disabled-border-color, $chip-primary-disabled-color, $chip-outline-primary-disabled-bg-color,  $chip-outline-primary-disabled-border-color, $chip-outline-primary-disabled-color);

@include chip-disabled-states('success', $chip-success-disabled-bg-color, $chip-success-disabled-border-color, $chip-success-disabled-color, $chip-outline-success-disabled-bg-color, $chip-outline-success-disabled-border-color, $chip-outline-success-disabled-color);

@include chip-disabled-states('info', $chip-info-disabled-bg-color, $chip-info-disabled-border-color, $chip-info-disabled-color, $chip-outline-info-disabled-bg-color, $chip-outline-info-disabled-border-color, $chip-outline-info-disabled-color);

@include chip-disabled-states('warning', $chip-warning-disabled-bg-color, $chip-warning-disabled-border-color, $chip-warning-disabled-color, $chip-outline-warning-disabled-bg-color, $chip-outline-warning-disabled-border-color, $chip-outline-warning-disabled-color);

@include chip-disabled-states('error', $chip-error-disabled-bg-color, $chip-error-disabled-border-color, $chip-error-disabled-color, $chip-outline-error-disabled-bg-color, $chip-outline-error-disabled-border-color, $chip-outline-error-disabled-color);

@include chip-focus-shadow('primary', $chip-primary-keyboard-focus-box-shadow);
@include chip-focus-shadow('success', $chip-success-keyboard-focus-box-shadow);
@include chip-focus-shadow('error', $chip-error-keyboard-focus-box-shadow);
@include chip-focus-shadow('info', $chip-info-keyboard-focus-box-shadow);
@include chip-focus-shadow('warning', $chip-warning-keyboard-focus-box-shadow);
}