@import '../../lib/commonStyles/colors.scss';
@import '../../lib/commonStyles/no-select';

.btnSvg {
  width: 100%;
}

.circle {
  fill: transparent;
  stroke-width: 10;
  font-weight: 100;
  stroke: $primary-color-highlight;
  opacity: 0.9;
}

.noBorder {
  stroke: transparent;
}

.btnSvgGroup {
  @include no-select;
  cursor: pointer;

  &:hover {
    circle {
      stroke: $primary-color-highlight-solid;
    }
    .noBorder {
      stroke: transparent;
    }
  }
}

.icon {
  g,
  path,
  rect {
    fill: $primary-color;
  }
}

.ripple {
  position: absolute;
  fill: rgba($primary-color, 0.3);
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 1s ease-out infinite;
  transform-origin: center;
}

@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}