.radio {
  display: inline-flex;
  cursor: pointer;
  line-height: 19px;
}

.radio__label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  color: $palette-neutral-900;

  .radio--active & {
    color: $palette-neutral-1200;
  }

  .radio.radio--disabled & {
    color: $palette-neutral-700;
  }

  *[class^='iconoir-'],
  *[class*=' iconoir-'],
  *[class^='baserow-icon-'],
  *[class*=' baserow-icon-'] {
    font-size: 14px;
  }
}

.radio__input {
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  top: 1px;
}

.radio__input input[type='radio'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.radio__input label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid $palette-neutral-400;
  cursor: pointer;

  @include elevation($elevation-low);
}

.radio--error {
  .radio__input label {
    border: 1px solid $palette-red-600;
  }
}

.radio__input input[type='radio']:disabled + label {
  background-color: $palette-neutral-100;
  box-shadow: none;
  cursor: not-allowed;
}

.radio__input input[type='radio']:checked + label {
  @include fill-radio('#{$palette-blue-500}');
}

.radio__input input[type='radio']:checked + label:hover {
  @include fill-radio('#{$palette-blue-700}');
}

.radio__input input[type='radio']:disabled:checked + label {
  @include fill-radio('#{$palette-neutral-200}');
}

.radio__loading {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  position: relative;
  cursor: wait;
  user-select: none;

  &:hover,
  &:focus {
    box-shadow: none;
  }

  &::after {
    content: ' ';
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -7px;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 0.2em solid;
    border-color: $palette-blue-500 transparent $palette-blue-500 transparent;
    animation: spin infinite 1800ms;
    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
}

.radio__input .radio__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #007bff;
  border-top-color: transparent;
  animation: radio__loading 0.5s linear infinite;
}

.radio-group {
  display: flex;
  flex-flow: row wrap;
  gap: 5px;
}

.radio-group__radio {
  margin-right: 16px;

  &:last-child {
    margin-right: 0;
  }
}

.radio-group--vertical {
  flex-direction: column;
}

.radio--disabled {
  cursor: not-allowed;
}
