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

: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));
  }

  &--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;
  }

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

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