@use './focus';
@use './state';

@mixin ods-radio() {
  appearance: none;
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--ods-color-neutral-300);
  border-radius: 50%;
  cursor: pointer;
  width: 16px;
  height: 16px;

  &::before {
    transform: scale(0);
    transition: 120ms all ease-in-out;
    margin: auto;
    border-radius: 50%;
    background-color: var(--ods-color-primary-000);
    width: 4px;
    height: 4px;
    content: "";
  }

  &:focus {
    @include focus.ods-focus();
  }

  &:not(&--error) {
    &:focus {
      border-color: var(--ods-color-form-element-border-focus-default);
    }

    &:hover {
      border-color: var(--ods-color-form-element-border-hover-default);
    }
  }

  &:checked::before {
    transform: scale(1);
  }

  &:disabled {
    @include state.ods-is-disabled();

    &:checked {
      &::before {
        background-color: state.$ods-state-is-disabled-text-color;
      }
    }
  }

  &:not(:disabled):checked {
    border-color: var(--ods-color-primary-500);
    background-color: var(--ods-color-primary-500);

    &:focus,
    &:hover {
      border-color: var(--ods-color-primary-700);
      background-color: var(--ods-color-primary-700);
    }
  }
}