/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

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

  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: $colorOk;
    color: $textColorAccent;
    border-radius: 50%;
    box-sizing: content-box;
    padding: $padding / 2;
  }

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

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

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

      [data-whatintent='mouse'] & {
        box-shadow: none;

        &.active {
          box-shadow: 0 0 0 2px $iconActiveBackground;
        }
      }
    }

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