@import '../settings/variables';

$unchecked-size: 0.5rem;
$checked-size: 0.25rem;

.c-tce-brenchmark-toggle {
  &__radio-button {
    cursor: pointer;
    border-radius: 50%;
    font-size: $unchecked-size;
    padding: 0.5em;
    width: 2em;
    height: 2em;
    background-color: #fff;
    border: $hairline solid #B3BDC5;
    position: relative;

    @include media-breakpoint-down(lg) {
      font-size: $unchecked-size * 1.5;
    }

    &--selected {
      font-size: $checked-size;
      border-radius: 50%;
      background-color: $color-primary;
      margin: 1em;
      border: none;

      @include media-breakpoint-down(lg) {
        font-size: $checked-size * 1.5;
      }

      &:after {
        content: '';
        display: block;
        position: absolute;
        left: -1em;
        top: -1em;
        bottom: -1em;
        right: -1em;
        border: $hairline solid $color-primary;
        border-radius: 50%;
      }
    }
  }

}