.frost-radio-group {
  cursor: pointer;
}

.frost-radio-button {
  padding: 2px;
  outline: 0;

  &.error {
    svg {
      .ring {
        fill: $frost-color-input-error-border;
      }
    }
  }

  &.small {
    > .label {
      &::before  {
        width: 20px;
        height: 20px;
      }
    }

    svg {
      width: 20px;
      height: 20px;
    }
  }

  &.medium {
    > .label {
      &::before {
        width: 25px;
        height: 25px;
      }
    }

    svg {
      width: 25px;
      height: 25px;
    }
  }

  &.large {
    > .label {
      &::before {
        width: 30px;
        height: 30px;
      }
    }

    svg {
      width: 30px;
      height: 30px;
    }
  }

  label {
    cursor: pointer;

    svg {
      margin-right: 5px;
      vertical-align: middle;

      .inner {
        transition: fill .2s ease;
        fill: transparent;
      }

      .ring {
        transition: fill .2s ease;
        fill: $frost-color-grey-5;
      }
    }
  }

  .frost-radio-button-input {
    display: none;
  }

  &.checked {
    &:not(.disabled) {
      label {
        svg {
          .inner {
            fill: $frost-color-blue-1;
          }
        }
      }
    }
  }

  &:hover,
  &:focus {
    &:not(.disabled) {
      &:not(.checked) {
        label {
          svg {
            .inner {
              fill: $frost-color-blue-4;
            }
          }
        }
      }
    }
  }

  &.disabled {
    label {
      color: $frost-color-grey-5;
      cursor: default;
    }

    &.checked {
      label {
        svg {
          .inner {
            fill: $frost-color-grey-5;
          }
        }
      }
    }
  }
}