@import "../../helpers";
.sf-radio {
  display: var(--radio-display, flex);
  transition: var(
                  --radio-transition,
                  background-color 0.25s cubic-bezier(1, 0.5, 0.8, 1)
  );
  &__label {
    display: var(--radio-label-display, flex);
    @include font(
                    --radio-label-font,
                    var(--font-weight--normal),
                    var(--font-size--base),
                    normal,
                    var(--font-family--primary)
    );
    color: var(--radio-label-color);
  }
  &__checkmark {
    box-sizing: border-box;
    width: var(--radio-checkmark-size, 1.5rem);
    height: var(--radio-checkmark-size, 1.5rem);
    @include border(--radio-checkmark-border, 4px, solid, var(--c-primary));
    border-radius: var(--radio-checkmark-border-radius, 100%);
    transition: var(
                    --radio-checkmark-transition,
                    border 0.25s cubic-bezier(1, 0.5, 0.8, 1)
    );
    &.is-active {
      --radio-checkmark-border-width: 9px;
      --radio-checkmark-border-color: var(--c-primary);
    }
  }
  input {
    position: absolute;
    opacity: 0;
    left: -1000%;
    width: 1px;
    height: 1px;
    &[style*="outline: none"]:focus + .sf-radio__checkmark {
      outline: none;
    }
    &:focus + .sf-radio__checkmark {
      outline-color: -webkit-focus-ring-color;
      outline-style: auto;
    }
  }
  &__container {
    position: relative;
    display: var(--radio-container-display, flex);
    align-items: var(--radio-container-align-items);
    flex: 1;
    cursor: var(--radio-container-cursor, pointer);
  }
  &:hover {
    --radio-checkmark-border-color: var(--c-black);
  }
  &__content {
    flex: 1;
    margin: var(--radio-content-margin, 0 0 0 var(--spacer-sm));
  }
  &__details {
    margin: var(--radio-details-margin, var(--spacer-xs) 0 0 0);
    color: var(--radio-details-color, var(--c-text-muted));
    @include font(
                    --radio-details-font,
                    var(--font-weight--light),
                    var(--font-size--sm),
                    1.2,
                    var(--font-family--primary)
    );
  }
  &__description {
    margin: var(--radio-description-margin, var(--spacer-xs) 0 0 0);
    @include font(
                    --radio-description-font,
                    var(--font-weight--light),
                    var(--font-size--sm),
                    1.6,
                    var(--font-family--primary)
    );
    color: var(--radio-description-margin);
  }
  &.is-active {
  }
  &.is-disabled {
    --radio-checkmark-border-color: var(--c-text-disabled);
    --radio-details-color: var(--c-text-disabled);
    --radio-description-margin: var(--c-text-disabled);
    --radio-label-color: var(--c-text-disabled);
    --radio-container-cursor: default;
    &:hover {
      --radio-checkmark-border-color: var(--c-text-disabled);
    }
  }
  &--transparent {
    &.is-active {
      --radio-background: transparent;
    }
  }
  @include for-desktop {
    --radio-container-padding: var(--spacer-sm);
  }
}