

.Radio {
  display: block;
  }

  .Radio__input {
    display: none;
    }

  .Radio__container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    }

  .Radio__input:disabled ~ .Radio__container {
    opacity: .6;
    }

    .Radio__icon {
      flex-shrink: 0;
      box-sizing: border-box;
      border-radius: 50%;
      position: relative;
      }

      .Radio__icon::after {
        position: absolute;
        content: '';
        display: block;
        border-radius: 50%;
        box-sizing: border-box;
        }

    .Radio__content {
      line-height: 20px;
      font-size: 16px;
      flex-grow: 1;
      max-width: 100%;
      color: var(--text_primary);
      }

      .Radio__description {
        font-size: 13px;
        line-height: 15px;
        color: var(--text_secondary);
        }

.Radio--ios {
  padding: 10px 12px;
  }

  .Radio--ios .Radio__container {}

    .Radio--ios .Radio__icon {
      width: 22px;
      height: 22px;
      border: 2px solid var(--icon_secondary);
      margin: 1px 12px 1px 1px;
      transition: border-color .15s var(--ios-easing);
      }

    .Radio--ios .Radio__input:checked ~ .Radio__container .Radio__icon {
      border-color: var(--accent);
      }

      .Radio--ios .Radio__icon::after {
        width: 14px;
        height: 14px;
        left: 2px;
        top: 2px;
        transform: scale(.3);
        transition: transform .15s var(--ios-easing);
        }

      .Radio--ios .Radio__input:checked ~ .Radio__container .Radio__icon::after {
        background-color: var(--accent);
        transform: scale(1);
        }

    .Radio--android .Radio__content {
      margin: 1px 0;
      }

.Radio--android {
  padding: 12px 16px;
  }

  .Radio--android .Radio__container {}

    .Radio--android .Radio__icon {
      width: 20px;
      height: 20px;
      border: 2px solid var(--icon_secondary);
      margin: 2px 18px 2px 2px;
      transition: border-color .5s var(--ios-easing);
      }

      .Radio--android .Radio__icon::after {
        width: 10px;
        height: 10px;
        left: 3px;
        top: 3px;
        transform: scale(.3);
        transition: transform .5s var(--ios-easing);
        }

    .Radio--android .Radio__content {
      margin: 2px 0;
      }

    .Radio--android .Radio__input:checked ~ .Radio__container .Radio__icon {
      border-color: var(--accent);
      }

      .Radio--android .Radio__input:checked ~ .Radio__container .Radio__icon::after {
        background-color: var(--accent);
        transform: scale(1);
        }
