//
// CivicTheme Chip component styles.
//

.ct-chip {
  $root: &;

  cursor: pointer;
  border: var(--ct-chip-border-width) solid transparent;
  border-radius: ct-spacing(6);

  @include ct-link-decoration(false, false, false, false);

  #{$root}__dismiss {
    display: none;
  }

  #{$root}__input[checked] + .ct-chip__dismiss {
    display: inline;
  }

  $map: (
    'chip': (
      'light': (
        'normal': (
          'color': var(--ct-chip-light-color),
          'background-color': var(--ct-chip-light-background-color),
          'border-color': var(--ct-chip-light-border-color),
          'outline-color': false,
        ),
        'hover': (
          'color': var(--ct-chip-light-hover-color),
          'background-color': var(--ct-chip-light-hover-background-color),
          'border-color': var(--ct-chip-light-hover-border-color),
          'outline-color': false,
        ),
        'focus': (
          'color': $ct-chip-light-focus-color,
          'background-color': $ct-chip-light-focus-background-color,
          'border-color': $ct-chip-light-focus-border-color,
          'outline-color': var(--ct-chip-light-focus-outline-color),
        ),
        'selected': (
          'color': var(--ct-chip-light-selected-color),
          'background-color': var(--ct-chip-light-selected-background-color),
          'border-color': var(--ct-chip-light-selected-border-color),
        ),
        'active': (
          'color': var(--ct-chip-light-selected-color),
          'background-color': var(--ct-chip-light-selected-background-color),
          'border-color': var(--ct-chip-light-selected-border-color),
          'outline-color': false,
        ),
        'active-hover': (
          'color': var(--ct-chip-light-selected-hover-color),
          'background-color': var(--ct-chip-light-selected-hover-background-color),
          'border-color': var(--ct-chip-light-selected-hover-border-color),
          'outline-color': false,
        ),
        'visited': (
          'color': var(--ct-chip-light-selected-color),
          'background-color': var(--ct-chip-light-selected-background-color),
          'border-color': var(--ct-chip-light-selected-border-color),
          'outline-color': false,
        ),
      ),
      'dark': (
        'normal': (
          'color': var(--ct-chip-dark-color),
          'background-color': var(--ct-chip-dark-background-color),
          'border-color': var(--ct-chip-dark-border-color),
          'outline-color': false,
        ),
        'hover': (
          'color': var(--ct-chip-dark-hover-color),
          'background-color': var(--ct-chip-dark-hover-background-color),
          'border-color': var(--ct-chip-dark-hover-border-color),
          'outline-color': false,
        ),
        'focus': (
          'color': $ct-chip-dark-focus-color,
          'background-color': $ct-chip-dark-focus-background-color,
          'border-color': $ct-chip-dark-focus-border-color,
          'outline-color': var(--ct-chip-dark-focus-outline-color),
        ),
        'selected': (
          'color': var(--ct-chip-dark-selected-color),
          'background-color': var(--ct-chip-dark-selected-background-color),
          'border-color': var(--ct-chip-dark-selected-border-color),
        ),
        'active': (
          'color': var(--ct-chip-dark-selected-color),
          'background-color': var(--ct-chip-dark-selected-background-color),
          'border-color': var(--ct-chip-dark-selected-border-color),
          'outline-color': false,
        ),
        'active-hover': (
          'color': var(--ct-chip-dark-selected-hover-color),
          'background-color': var(--ct-chip-dark-selected-hover-background-color),
          'border-color': var(--ct-chip-dark-selected-hover-border-color),
          'outline-color': false,
        ),
        'visited': (
          'color': var(--ct-chip-dark-selected-color),
          'background-color': var(--ct-chip-dark-selected-background-color),
          'border-color': var(--ct-chip-dark-selected-border-color),
          'outline-color': false,
        ),
      )
    ),
  );

  // Re-using Button's mixin with Chip's custom color map.
  @include ct-button-type('chip', $map);

  // Size.
  &--large {
    @include ct-button-size('large');

    &__dismiss {
      margin-left: ct-spacing(3);
    }
  }

  &--regular {
    @include ct-button-size('regular');

    &__dismiss {
      margin-left: ct-spacing(3);
    }
  }

  &--small {
    @include ct-button-size('small');

    &__dismiss {
      margin-left: ct-spacing(2);
    }
  }
}
