/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

.Icon {
  --size: 21px;
  --small-size: 18px;
  --smallest-size: 16px;
  --big-size: 32px;
  --color-active: var(--iconActiveColor);
  --bgc-active: var(--iconActiveBackground);
  --focus-color: var(--icon-focus-color, var(--blue));

  display: inline-flex;
  flex-shrink: 0;
  font-style: normal;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  box-sizing: content-box; // allow to use padding for outer spacing
  -webkit-user-select: none; /* safari */
  -moz-user-select: none; /* firefox */

  font-size: var(--size);
  width: var(--size);
  height: var(--size);

  &.smallest {
    font-size: var(--smallest-size);
    width: var(--smallest-size);
    height: var(--smallest-size);
  }

  &.small {
    font-size: var(--small-size);
    width: var(--small-size);
    height: var(--small-size);
  }

  &.big {
    font-size: var(--big-size);
    width: var(--big-size);
    height: var(--big-size);
  }

  // material-icon
  &.material {
    > .icon {
      font-family: "Material Icons";
      font-size: inherit;
      font-weight: inherit;
      font-style: inherit;
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;

      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
      /* Support for IE. */
      font-feature-settings: 'liga';
    }
  }

  // inline svg icon
  &.svg {
    box-sizing: content-box;

    > .icon {
      width: 100%;
      height: 100%;
    }

    svg {
      pointer-events: none;
      width: 100%;
      height: 100%;

      * {
        fill: currentColor;
      }

      line {
        stroke: currentColor;
      }
    }
  }

  &.disabled {
    opacity: .5;
    color: inherit !important;
    cursor: not-allowed !important;
  }

  &.sticker {
    background: var(--colorOk);
    color: var(--textColorAccent);
    border-radius: 50%;
    box-sizing: content-box;
    padding: 8px * 0.5;
  }

  &.active {
    color: var(--color-active);
    box-shadow: 0 0 0 2px var(--iconActiveBackground);
    background-color: var(--iconActiveBackground);
  }

  &.interactive {
    cursor: pointer;
    transition: 250ms color, 250ms opacity, 150ms background-color, 150ms box-shadow;
    border-radius: var(--border-radius);

    &.focusable:focus-visible {
      box-shadow: 0 0 0 2px var(--focus-color);
    }

    &:hover {
      @extend .active;
    }
  }
}