@layer theme-v15 {
  :root {
    --dimensions-radio-bouton: var(--taille-radio-bouton, 14px);

    --couleur-fond-radio-bouton: var(--couleur-blanc);
    --couleur-radio-bouton: var(--couleur-principale-4);
    --couleur-border-radio-bouton: var(--couleur-principale-4);
  }

  input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    outline: none;
    width: var(--dimensions-radio-bouton);
    height: var(--dimensions-radio-bouton);
    margin: var(--margin-input-radio-bouton, 1px 3px);
    background-color: var(--couleur-fond-radio-bouton);
    border: 1px solid var(--couleur-border-radio-bouton);
    border-radius: 500px;

    + label[for] {
      display: inline-block;
      margin-block: 1px;
    }
  }

  input[type="radio"]::after {
    --taille-interieur-radio-bouton: calc(14px - 6px);

    content: '';
    display: inline-block;
    width: var(--taille-interieur-radio-bouton);
    height: var(--taille-interieur-radio-bouton);
    background-color: var(--couleur-radio-bouton);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    visibility: hidden;
    border-radius: 500px;
  }

  input[type="radio"]:checked::after {
    visibility: visible;
  }

  input[type="radio"]:is(:hover, :focus):not([readonly], [disabled]) {
    --couleur-fond-radio-bouton: var(--couleur-principale-1);
  }

  input[type="radio"]:is([readonly], [disabled]) {
    --couleur-fond-radio-bouton: var(--couleur-secondaire-4);
    --couleur-radio-bouton: var(--couleur-secondaire-7);
    --couleur-border-radio-bouton: var(--couleur-secondaire-4);
  }
}