@import "../settings/variables";
@import "../tools/typography";

.radio-button {
  display: block;
  line-height: 1;
  position: relative;

  & + & {
    margin-top: $radio-button-track-margin-vertical;
  }

  &__input {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
  }

  &__label {
    @include sm-medium--primary();
    align-items: $radio-button-track-align-items;
    cursor: default;
    display: flex;
  }

  &__label:before {
    background: $radio-button-track-background-color;
    border-radius: 100%;
    border: $radio-button-track-border-width $radio-button-track-border-style
      $radio-button-track-border-color;
    content: "";
    display: inline-block;
    height: $radio-button-track-button-size;
    margin-right: $radio-button-track-margin-right;
    min-width: $radio-button-track-button-size;
    width: $radio-button-track-button-size;
  }

  &__input--error + &__label:before {
    border-color: $radio-button-track-error-border-color;
  }

  &__input:checked + &__label:before {
    border: $radio-button-track-border-width-checked
      $radio-button-track-border-style $radio-button-track-checked-border-color;
  }

  &__input:disabled + &__label:before {
    border-color: $radio-button-track-disabled-border-color;
  }

  &__input:focus + &__label:before {
    border-color: $radio-button-track-border-color-focus;
    box-shadow: $radio-button-track-box-shadow-focus;
  }
}