.container {
  line-height: 0;
  padding: calc(var(--space) / 2) 0;
}

/* Size */
.small {
  --radio-size: 20px;
  --radio-border-width: 2px;
  --radio-outline-width: 2px;
}

.normal {
  --radio-size: 26px;
  --radio-border-width: 2px;
  --radio-outline-width: 3px;
}

.large {
  --radio-size: 32px;
  --radio-border-width: 2px;
  --radio-outline-width: 3px;
}

/* Intents */
.default {
  --radio-color: var(--ui-grey-50);
  --radio-outline-color: color-mod(var(--ui-grey-50) alpha(30%));
}

.primary {
  --radio-color: var(--color-primary);
  --radio-outline-color: color-mod(var(--color-primary) alpha(30%));
}

.info {
  --radio-color: var(--color-info);
  --radio-outline-color: color-mod(var(--color-info) alpha(30%));
}

.success {
  --radio-color: var(--color-success);
  --radio-outline-color: color-mod(var(--color-success) alpha(30%));
}

.danger {
  --radio-color: var(--color-danger);
  --radio-outline-color: color-mod(var(--color-danger) alpha(30%));
}

.warning {
  --radio-color: var(--color-warning);
  --radio-outline-color: color-mod(var(--color-warning) alpha(30%));
}

.input {
  position: absolute;
  left: -9999px;
  opacity: 0;

  &:checked + .radio {
    &:before {
      transform: scale(0.4);
      background-color: var(--radio-color);
    }
  }

  &:disabled + .radio,
  &:disabled + .radio + .labelText {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:focus + .radio,
  &:active + .radio {
    box-shadow: 0 0 0 var(--radio-outline-width) var(--radio-outline-color);
  }
}

.radio {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: box-shadow var(--transition-duration) ease;
  border-radius: 50%;
  border: var(--radio-border-width) solid var(--radio-color);
  width: var(--radio-size);
  height: var(--radio-size);

  &:before {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    transform: scale(0);
    transition: transform var(--transition-duration) ease;
    border-radius: 50%;
    background-color: var(--radio-color);
  }
}

.label {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
}

.labelText {
  line-height: var(--radio-size);
  padding-left: var(--space);
}

.fill {
  width: 100%;

  & .label,
  & .labelText {
    width: 100%;
  }
}

.right {
  & .label {
    flex-direction: row-reverse;
  }

  & .labelText {
    padding-right: var(--space);
    padding-left: 0;
  }
}