.ui-input {
  &__radio {
    &--default {
      position: relative;

      display: inline-block;
      width: 100%;
      max-width: 24px;
      height: 24px;
      margin-right: 1rem;

      background-color: transparent;
      border-color: transparent;
      border-radius: 24px;
      box-shadow: 0 0 0 1px ui-color(blue);
      cursor: pointer;

      appearance: none;

      &--center {
        justify-content: center;
      }

      &:checked {
        background: ui-color(white);
        box-shadow: 0 0 0 1px ui-color(blue);
      }

      &:checked::after {
        position: absolute;
        top: 6px;
        right: 6px;
        bottom: 6px;
        left: 6px;

        width: 12px;
        height: 12px;

        background: ui-color(blue);
        border-radius: 12px;

        content: '';
      }

      &:hover {
        box-shadow: inset 0 0 0 1px ui-color(blue), 0 0 0 1px ui-color(blue);
      }
    }

    &--toggle {
      position: absolute !important;

      width: 1px;
      height: 1px;
      overflow: hidden;

      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);

      &:checked + label {
        color: ui-color(blue);

        border-color: ui-color(blue);
        box-shadow: inset 0 0 0 1px ui-color(blue);
      }
    }

    &--toggle-with-checkmark,
    &--white-toggle-with-checkmark {
      position: absolute !important;

      width: 1px;
      height: 1px;
      overflow: hidden;

      color: ui-color(blue) !important;

      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px, 1px, 1px, 1px);

      &:checked + label {
        color: ui-color(blue);

        border-color: ui-color(blue);
        box-shadow: inset 0 0 0 1px ui-color(blue);
      }
    }

    &--toggle-with-checkmark:focus + label,
    &--white-toggle-with-checkmark:focus + label {
      border-width: 1px;
      outline: Highlight auto;
      outline: -webkit-focus-ring-color auto;
      box-shadow: none !important;
    }

    &--toggle:focus + label {
      border-width: 1px;

      outline: Highlight auto;
      outline: -webkit-focus-ring-color auto;
      box-shadow: none !important;
    }
  }

  &__radio-label {
    &-text {
      &--default {
        color: ui-color(blue);
        font-size: 14px;
        line-height: 22px;
      }
    }

    &--default {
      color: ui-color(blue);
      font-size: 14px;
      font-family: $ui-font-specter-regular;
      line-height: 22px;

      cursor: pointer;
    }

    &--toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 100px;

      color: ui-color(blue);

      text-align: center;

      background-color: ui-color(natural);
      border: 1px solid ui-color(blue);

      cursor: pointer;

      &:hover {
        box-shadow: inset 0 0 0 1px ui-color(blue);
      }

      &:focus {
        outline: Highlight auto;
        outline: -webkit-focus-ring-color auto;
        box-shadow: none !important;
      }
    }

    &--toggle-with-checkmark,
    &--white-toggle-with-checkmark {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 100px;

      color: ui-color(paper-ink-medium);

      text-align: center;

      cursor: pointer;
      // @extend .ui-border;
      // @extend .ui-border--light;
      // @extend .ui-border-radius;
    }

    &--toggle-with-checkmark {
      color: ui-color(blue) !important;

      background: ui-color(natural);

      border: 1px solid ui-color(blue);
    }

    &--white-toggle-with-checkmark {
      color: ui-color(blue) !important;

      background: ui-color(white);

      border: 1px solid ui-color(blue);
    }

    &--toggle-with-checkmark:hover,
    &--white-toggle-with-checkmark:hover {
      box-shadow: inset 0 0 0 1px ui-color(blue);
    }

    &--toggle-with-checkmark:focus,
    &--white-toggle-with-checkmark:focus {
      outline: Highlight auto;
      outline: -webkit-focus-ring-color auto;
      box-shadow: none !important;
    }
  }

  &__radio-label-text {
    &--default {
      margin: 0;

      font-size: 1rem;
      font-family: $ui-font-specter-regular;

      cursor: pointer;
    }

    &--toggle {
      margin: 0;
    }

    &--toggle-with-checkmark,
    &--white-toggle-with-checkmark {
      margin: 0;
    }
  }

  &__radio-wrapper {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;

    &--toggle-with-checkmark,
    &--white-toggle-with-checkmark {
      border-radius: 3px;
    }

    &--with-image {
      position: relative;

      cursor: pointer;

      & > label {
        background: none;
      }

      .ui-input__image-radio-label {
        position: absolute;
        bottom: -25px;
        left: 50%;

        display: inline-block;

        font-weight: 700;
        white-space: nowrap;

        transform: translateX(-50%);
      }
    }

    &--selected {
      .ui-input__radio-label--toggle-with-checkmark::before,
      .ui-input__radio-label--white-toggle-with-checkmark::before {
        @include ui-icon--checkmark;
        position: absolute;
        top: 0;
        right: 3px;
        z-index: 1;

        width: 16px;

        color: ui-color(white);

        font-size: $ui-icon-dogear-size; // Bespoke
        line-height: 24px;
        text-align: center;
      }

      .ui-input__radio-label--toggle-with-checkmark::after,
      .ui-input__radio-label--white-toggle-with-checkmark::after {
        position: absolute;
        top: 0;
        right: 0;

        width: 24px;
        height: 24px;

        background: ui-color(blue);

        content: '';
      }
    }
  }
}