@import (reference) './Icon.less';
@import (reference) './Link.less';

.IconButton {
  --Link-color: var(--color-black);
  --Link-hoverColor: var(--color-dominant5);
  --Link-hoverDecoration: none;

  color: var(--Link-color);
  cursor: pointer;
  display: inline-block;
  height: calc(var(--gap-s) * 2 + var(--Icon-size));
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: calc(var(--gap-s) * 2 + var(--Icon-size));

  button& {
    background: transparent;
    border: 0;
    padding: 0;
  }

  &::before {
    .Icon;

    content: var(--IconButton-name, attr(data-icon-button-name));
    height: var(--Icon-size);
    padding: var(--gap-s) 100px 100px var(--gap-s);
    top: 0;
    width: var(--Icon-size);
  }

  &::after {
    background: var(--Link-color);
    border-radius: calc(var(--gap-s) + var(--Icon-size) / 2);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transition:
      opacity var(--time-xs) var(--ease-in),
      transform var(--time-s) var(--ease-out);
    width: 100%;
  }
}

.IconButton.is-focus {
  &::before {
    color: var(--Link-hoverColor);
    position: relative;
    z-index: 10;
  }

  &::after {
    opacity: 0.08;
    transform: none;
  }
}

.IconButton.is-pin {
  --IconButton-name: 'push_pin';

  color: var(--color-black);
}

.IconButton.is-disabled {
  color: var(--color-gray5);
}

.IconButton.is-red {
  .Link.is-red;
}

.IconButton.is-white {
  .Link.is-white;
}

.IconButton.is-black {
  .Link.is-black;
}

.IconButton {
  &:hover,
  &:focus {
    .IconButton.is-focus;
  }
}

.IconButton.no-Fill {
  --Button-size: calc(var(--gap-s) * 2 + var(--Text-height));

  line-height: var(--Button-size);

  &::before {
    .Icon;

    border: 1px solid currentColor;
    border-radius: 50%;
    content: var(--IconButton-name);
    display: inline-block;
    height: var(--Button-size);
    margin-right: var(--gap-s);
    padding: calc((var(--Button-size) - var(--Icon-size)) / 2 - 1px);
    top: unset;
    width: var(--Button-size);
  }
}
