@import (reference) '../variables.less';

.button {
  position: relative;
  height: @toolbar-closed-size;
  width: @toolbar-closed-size;
  border: 0;
  padding: 0;
  background-color: @toolbar-background;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  height: @toolbar-item-size;
  width: @toolbar-item-size;

  &.success {
    color: @positive;
  }

  &:not(.disabled) {
    cursor: pointer;
  }

  &.disabled {
    color: @gray-3;
  }

  &.showIndicator,
  &.button_isActive:not(.success):not(.disabled),
  &:hover:not(.success):not(.disabled) {
    color: @toolbar-highlight;
  }

  // Background
  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: currentColor;
    opacity: 0;
    transition: @transition-slow;
    pointer-events: none;

    :not(.success):not(:hover):focus& {
      color: @toolbar-foregound;
    }

    :not(.success):not(.disabled):not(.button_isActive):focus&,
    :not(.success):not(.disabled):hover& {
      opacity: 0.1;
    }
  }

  // Side strip
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5px;
    background-color: currentColor;
    transition: @transition-slow;

    :not(.button_isActive)& {
      transform: translateX(100%);
      opacity: 0;
    }
  }
}

.indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: @toolbar-highlight;
  border: 2px solid @toolbar-background;
  pointer-events: none;
  transition: @transition-fast;

  &:not(.show) {
    transform: scale(0);
    opacity: 0;
  }
}

.successIndicator {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: @positive;
  border: 2px solid @toolbar-background;
  pointer-events: none;
  transition: @transition-fast;

  svg {
    color: @white;
  }

  &:not(.show) {
    transform: translate3d(-15px, 9px, 0) scale(0);
    opacity: 0;
  }
}