$control-size: rem(16px);

// Need to push the control down just a little to have it appear
// vertically centered with the label.
$control-vertical-adjustment: 2px;

// Negative margin on the left compensates for the icon being inset
// within its viewbox.
$icon-horizontal-adjustment: 2px;

.Polaris-Choice {
  display: inline-flex;
  justify-content: flex-start;
  padding: spacing(extra-tight) 0;
}

.Polaris-Choice--labelHidden {
  > .Polaris-Choice__Label {
    @include visually-hidden;
  }
}

.Polaris-Choice__Control {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  height: $control-size;
  width: $control-size;
  margin-top: $control-vertical-adjustment;
  margin-right: spacing(tight);

  > * {
    width: 100%;
  }
}

.Polaris-Choice__Label {
  @include text-style-body;
  -webkit-tap-highlight-color: transparent;
}

.Polaris-Choice__Descriptions {
  padding-left: spacing(tight) + $control-size;
}

.Polaris-Choice__HelpText {
  @include text-style-body;
  @include text-emphasis-subdued;
  margin-bottom: spacing(extra-tight);
}

.Polaris-Choice__Error {
  display: flex;
  margin-bottom: spacing(extra-tight);
  color: color(red, dark);
}

.Polaris-Choice__ErrorIcon {
  @include recolor-icon(color(red));
  margin: 0 spacing(extra-tight) 0 (-1 * $icon-horizontal-adjustment);
}