@use "../../wc";
@use "./lni";

$icon-colors: (
  default: --zn-text,
  primary: --zn-primary,
  accent: --zn-accent,
  info: --zn-color-info,
  warning: --zn-color-warning,
  error: --zn-color-error,
  success: --zn-color-success,
  white: --zn-body,
  disabled: --zn-color-disabled,
  red: --zn-red,
  blue: --zn-blue,
  green: --zn-green,
  orange: --zn-orange,
  yellow: --zn-yellow,
  indigo: --zn-indigo,
  violet: --zn-violet,
  pink: --zn-pink,
  grey: --zn-grey,
);

:host {
  display: inline-block;
  box-sizing: content-box !important;

  --icon-size: 24px;
  --icon-color: inherit;
}

:host([split-pane-focus]) .icon-wrapper {
  cursor: pointer;
}

.icon-wrapper {
  user-select: none;
  font-family: sans-serif;
  overflow: hidden;

  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 100%;
  height: 100%;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-color);
  overflow: hidden;
  line-height: 1;

  i {
    font-size: var(--icon-size) !important;
  }

  // Colors

  &--default {
    --icon-color: rgb(var(--zn-text));
  }

  &--primary {
    --icon-color: rgb(var(--zn-primary))
  }

  &--accent {
    --icon-color: rgb(var(--zn-accent));
  }

  &--info {
    --icon-color: rgb(var(--zn-color-info))
  }

  &--warning {
    --icon-color: rgb(var(--zn-color-warning))
  }

  &--error {
    --icon-color: rgb(var(--zn-color-error))
  }

  &--success {
    --icon-color: rgb(var(--zn-color-success))
  }

  &--white {
    --icon-color: rgb(var(--zn-body))
  }

  &--disabled {
    --icon-color: rgb(var(--zn-color-disabled))
  }

  &--red {
    --icon-color: rgb(var(--zn-red));
  }

  &--blue {
    --icon-color: rgb(var(--zn-blue));
  }

  &--green {
    --icon-color: rgb(var(--zn-green));
  }

  &--orange {
    --icon-color: rgb(var(--zn-orange));
  }

  &--yellow {
    --icon-color: rgb(var(--zn-yellow));
  }

  &--indigo {
    --icon-color: rgb(var(--zn-indigo));
  }

  &--violet {
    --icon-color: rgb(var(--zn-violet));
  }

  &--pink {
    --icon-color: rgb(var(--zn-pink));
  }

  &--grey {
    --icon-color: rgb(var(--zn-grey));
  }

  &--filled .lucide {
    fill: var(--icon-fill, currentColor);
  }

  @each $name, $token in $icon-colors {
    $display-name: "" + $name;
    &--fill-#{$display-name} {
      --icon-fill: rgb(var(#{$token}));
    }
  }

  &--round {
    border-radius: 50%;
  }

  &--tile {
    border-radius: 20%;
  }

  &--depth {
    position: relative;

    &:before, &:after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
    }

    &:before {
      box-shadow: inset -2px -2px 1px rgba(0, 0, 0, 0.1);
    }

    &:after {
      box-shadow: inset 2px 2px 1px rgba(255, 255, 255, 0.2);
    }
  }

  &--blink {
    animation: blink-animation 1.5s steps(5, start) infinite;
  }

  &--avatar {
    background-color: var(--avatar-color, var(--icon-color));
    color: hsl(from var(--avatar-color, var(--icon-color)) h s 95);
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar__text {
      font-size: calc((var(--icon-size) / 2.4));
      color: hsl(from var(--avatar-color, var(--icon-color)) h s 95);
      font-weight: var(--zn-font-weight-semibold);
    }
  }

  &--padded {
    padding: var(--zn-spacing-small);
  }

  &--squared {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1/1;
    display: block;
  }

  .mi {
    font-family: 'Material Icons';
    font-size: inherit;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;

    &--outlined {
      font-family: 'Material Icons Outlined';
    }

    &--round {
      font-family: 'Material Icons Round';
    }

    &--sharp {
      font-family: 'Material Icons Sharp';
    }

    &--two-tone {
      font-family: 'Material Icons Two Tone';
    }

    &--symbol-outlined {
      font-family: 'Material Symbols Outlined';
    }
  }

  .kb {
    font-family: 'Kubex Icons Brands';
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
  }

  .lucide {
    display: block;
    width: 100%;
    height: 100%;
    color: currentColor;
    stroke: currentColor;
  }

  img {
    max-width: 100%;
    vertical-align: middle;
  }
}

@keyframes blink-animation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}