@import '../../lib/commonStyles/colors.scss';
@import '../../lib/commonStyles/fonts.scss';

$title-height: 24px;

.root {
  position: relative;
  text-align: center;
  display: inline-block;
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
}

.button {
  width: 100%;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2px;
}

.buttonTitle {
  @include secondary-font;
  font-size: 85px;
  fill: $darkergray;
}

.buttonActive {
  circle {
    fill: $primary-color;
    stroke: $primary-color;
  }
  path {
    fill: #ffffff;
  }
}

.buttonDisabled {
  circle {
    fill: $lightgray;
    stroke: $gray;
  }
  path {
    fill: $primary-color-highlight-solid;
  }
  g {
    cursor: default;

    &:hover {
      circle {
        stroke: $gray;
      }
    }
  }
}

.svg {
  display: inline;
}