@import '../../lib/commonStyles/no-select';
@import '../../lib/commonStyles/full-size';
@import '../../lib/commonStyles/vertical-align';
@import '../../lib/commonStyles/colors.scss';
@import '../../lib/commonStyles/fonts.scss';

$btn_scale: 75%;
$btn_value_height: 55%;

.root {
  @include full-size;
  @include primary-font;
}

.btnSvg {
  width: 100%;
  height: 100%;
}

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

.circle {
  fill: transparent;
  stroke-width: 10;
  stroke: transparent;
  font-weight: 100;
}

.btnSvgGroup:hover .circle {
  stroke: $primary-color;
  /*fill: rgba(6, 132, 189, 0.1);*/
}

.btnSvgGroup:hover .btnValue,
.btnSvgGroup:hover .btnText {
  fill: $primary-color;
}

/*.pressed .circle,
.pressed:hover .circle {
  fill: rgba(6, 132, 189, 0.3);
}*/
.btnValue {
  // text-anchor: middle;
  font-size: 150px;
  fill: $night;
  font-weight: 300;
}

.special {
  font-size: 300px;
  font-weight: 100;
}

.btnText {
  // text-anchor: middle;
  font-size: 90px;
  fill: $grey-light;
  font-weight: 400;
}