@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/transitions';

.vtmn-radio-button[type='radio'] {
  position: absolute;
  opacity: 0;
}

.vtmn-radio-button[type='radio'] + label {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  line-height: var(--vtmn-typo_text-2-line-height);
  cursor: pointer;
  user-select: none;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-radio-button[type='radio'] + label::before {
  content: '';
  border: rem(2px) solid;
  border-radius: 100%;
  margin-block-start: rem(1px);
  margin-inline-end: rem(11px);
  padding: rem(8px);
  transition: var(--vtmn-transition_focus-visible);
}

.vtmn-radio-button[type='radio']:not(:checked) + label::before {
  border-color: var(--vtmn-semantic-color_content-inactive);
}

.vtmn-radio-button[type='radio']:not(:focus-visible, :checked, :disabled):hover
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-radio-button[type='radio']:not(:checked, :disabled):active
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-radio-button[type='radio']:focus-visible:not(:disabled) + label::before {
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-radio-button[type='radio']:checked + label::before {
  border-color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-radio-button[type='radio']:not(:focus-visible):checked:not(
    :disabled
  ):hover
  + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-radio-button[type='radio']:checked:not(:disabled):active + label::before {
  box-shadow: 0 0 0 rem(7px)
    var(--vtmn-semantic-color_active-primary-transparent);
}

.vtmn-radio-button[type='radio'] + label::after {
  content: '';
  mask: url("data:image/svg+xml;charset=utf-8, <svg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM5 10C5 12.7614 7.23858 15 10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10Z' /></svg>");
  mask-size: cover;
  background-color: var(--vtmn-semantic-color_content-active);
  position: absolute;
  block-size: rem(20px);
  inline-size: rem(20px);
  inset-block-start: rem(1px);
  inset-inline-start: 0;
  transition: all 0.2s;
}

.vtmn-radio-button[type='radio']:not(:checked) + label::after {
  opacity: 0;
  transform: scale(0) rotate(45deg);
}

.vtmn-radio-button[type='radio']:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.vtmn-radio-button[type='radio']:disabled + label {
  opacity: var(--vtmn-opacity_disabled-state);
  cursor: not-allowed;
}

.vtmn-radio-button[type='radio']:focus-visible + label::before {
  outline: none;
  box-shadow: var(--vtmn-shadow_focus-visible);
}
