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

.root {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-top: 100%;
}

.btnSvg {
  position: absolute;
  top: 0;
  left: 0;
  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;
  }
}