@import 'variables';

.jfRadio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  gap: 8px;
  &--checkmark {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    input[type=radio] {
      appearance: none;
      border: 2px solid var(--jfv-navy-100);
      border-radius: 50%;
      display: inline-flex;
      flex-shrink: 0;
      outline: 2px solid transparent;
      outline-offset: 0;
      margin: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      &:checked {
        background-color: var(--jfv-blue-500);
        border-color: var(--jfv-blue-500);
      }
    }
    &-inner {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--jfv-white);
      top: 4px;
      left: 4px;
    }
  }
  &--label {
    font-size: 14px;
    color: var(--jfv-navy-700);
  }
}