.d-radio {
  display: inline-flex;
  align-items: center;
}

.d-radio-container {
  display: flex;
  align-items: center;
}

.d-radio-input {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--d-color-neutral-20);
  background-color: var(--d-color-neutral-00);
  cursor: pointer;
  outline-color: var(--d-color-red-60);

  &:checked {
    border-width: 6px;
    border-color: var(--d-color-red-60);
  }

  &:disabled {
    cursor: not-allowed;
    + .d-radio-label {
      cursor: not-allowed;
      color: var(--d-color-neutral-30);
    }
  }

  &:disabled:not(:checked) {
    background-color: var(--d-color-neutral-10);
    border-color: var(--d-color-neutral-20);
  }

  &:checked:disabled {
    border-color: var(--d-color-red-30);
  }
}

.d-radio-label {
  user-select: none;
  cursor: pointer;
  margin-left: 8px;
  font-family: var(--d-font-stacks);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--d-color-neutral-80);
}

// Size

.d-radio-small {
  .d-radio-input {
    width: 16px;
    height: 16px;

    &:checked {
      border-width: 5px;
    }
  }
}

// Built-in Appearance

.d-radio-appearance-card {
  border-radius: 8px;
  border: 1px solid var(--d-color-neutral-20);
  background: var(--d-color-neutral-00);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  padding: 12px;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;

  .content {
    margin-left: 12px;
  }

  .title {
    font-weight: 500;
    margin-bottom: 4px;
  }

  .desc {
    font-family: var(--d-font-stacks);
  }

  &.checked {
    background-color: var(--d-color-red-05);
    border-color: var(--d-color-red-50);
  }

  &.disabled {
    background-color: var(--d-color-neutral-05);
    border-color: var(--d-color-neutral-10);
    color: var(--d-color-neutral-40);
    cursor: not-allowed;
  }

  &.checked.disabled {
    border-color: var(--d-color-red-20);
  }
}