@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";

@import "../error-message/error-message";
@import "../fieldset/fieldset";
@import "../hint/hint";
@import "../label/label";

@include govuk-exports("govuk/component/radios") {
  $govuk-radios-size: govuk-spacing(7);
  $govuk-radios-label-padding-left-right: govuk-spacing(3);
  // When the default focus width is used on a curved edge it looks visually smaller.
  // So for the circular radios we bump the default to make it look visually consistent.
  $govuk-radios-focus-width: $govuk-focus-width + 1px;

  .govuk-radios__item {
    @include govuk-font($size: 19);

    display: block;

    position: relative;

    min-height: $govuk-radios-size;

    margin-bottom: govuk-spacing(2);
    padding: 0 0 0 $govuk-radios-size;

    clear: left;
  }

  .govuk-radios__item:last-child,
  .govuk-radios__item:last-of-type {
    margin-bottom: 0;
  }

  .govuk-radios__input {
    position: absolute;

    z-index: 1;
    top: 0;
    left: 0;

    width: $govuk-radios-size;
    height: $govuk-radios-size;

    cursor: pointer;

    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
    @include govuk-not-ie8 {
      margin: 0;
      opacity: 0;
    }

    // add focus outline to input element for IE8
    @include govuk-if-ie8 {
      &:focus {
        outline: $govuk-focus-width solid $govuk-focus-colour;
      }
    }
  }

  .govuk-radios__label {
    display: inline-block;
    margin-bottom: 0;
    padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1);
    cursor: pointer;
    // remove 300ms pause on mobile
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }

  .govuk-radios__hint {
    display: block;
    padding-right: $govuk-radios-label-padding-left-right;
    padding-left: $govuk-radios-label-padding-left-right;
  }

  .govuk-radios__input + .govuk-radios__label::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    width: $govuk-radios-size;
    height: $govuk-radios-size;

    border: $govuk-border-width-form-element solid currentColor;
    border-radius: 50%;
    background: transparent;
  }

  .govuk-radios__input + .govuk-radios__label::after {
    content: "";

    position: absolute;
    top: govuk-spacing(2);
    left: govuk-spacing(2);

    width: 0;
    height: 0;

    border: govuk-spacing(2) solid currentColor;
    border-radius: 50%;
    opacity: 0;
    background: currentColor;
  }

  // Focused state
  .govuk-radios__input:focus + .govuk-radios__label::before {
    // Since box-shadows are removed when users customise their colours
    // We set a transparent outline that is shown instead.
    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
    outline: $govuk-focus-width solid transparent;
    outline-offset: $govuk-focus-width;
    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
  }

  // Selected state
  .govuk-radios__input:checked + .govuk-radios__label::after {
    opacity: 1;
  }

  // Disabled state
  .govuk-radios__input:disabled,
  .govuk-radios__input:disabled + .govuk-radios__label {
    cursor: default;
  }

  .govuk-radios__input:disabled + .govuk-radios__label {
    opacity: .5;
  }

  // Inline variant
  .govuk-radios--inline {
    @include mq ($from: tablet) {
      @include govuk-clearfix;

      .govuk-radios__item {
        margin-right: govuk-spacing(4);
        float: left;
        clear: none;
      }
    }

    // Prevent inline modifier being used with conditional reveals
    &.govuk-radios--conditional {
      .govuk-radios__item {
        margin-right: 0;
        float: none;
      }
    }
  }

  .govuk-radios__divider {
    $govuk-divider-size: $govuk-radios-size !default;
    @include govuk-font($size: 19);
    @include govuk-text-colour;
    width: $govuk-divider-size;
    margin-bottom: govuk-spacing(2);
    text-align: center;
  }

  $conditional-border-width: $govuk-border-width-mobile;
  // Calculate the amount of padding needed to keep the border centered against the radios.
  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
  // Move the border centered with the radios
  $conditional-margin-left: $conditional-border-padding;
  // Move the contents of the conditional inline with the label
  $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right;

  .govuk-radios__conditional {
    @include govuk-responsive-margin(4, "bottom");
    margin-left: $conditional-margin-left;
    padding-left: $conditional-padding-left;
    border-left: $conditional-border-width solid $govuk-border-colour;

    .js-enabled &--hidden {
      display: none;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }
}