// Import any global variables from "../../variables/*.scss"
@import "../../variables/colors.scss";
@import "../../variables/fonts.scss";

$radioInactiveDataUri: "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Eform control / radio (inactive)%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='form-control-/-radio-(inactive)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='checkbox' stroke='%23D1D5DA' fill='%23FFFFFF' x='0.5' y='0.5' width='17' height='17' rx='8.5'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E";
$radioActiveDataUri: "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Eform control / radio (active)%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='form-control-/-radio-(active)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='checkbox' fill='%235581FF' x='0' y='0' width='18' height='18' rx='9'%3E%3C/rect%3E%3Crect id='checkbox' fill='%23FFFFFF' x='6' y='6' width='6' height='6' rx='3'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E";
$radioDisabledInactiveDataUri: "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Eform control / radio (disabled)%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='form-control-/-radio-(disabled)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='checkbox' stroke='%23D1D5DA' fill='%23E1E4E8' x='0.5' y='0.5' width='17' height='17' rx='8.5'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E";
$radioDisabledActiveDataUri: "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Eform control / radio (disabled-active)%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='form-control-/-radio-(disabled-active)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='checkbox' stroke='%23D1D5DA' fill='%23E1E4E8' x='0.5' y='0.5' width='17' height='17' rx='8.5'%3E%3C/rect%3E%3Crect id='checkbox' fill='%23FFFFFF' x='6' y='6' width='6' height='6' rx='3'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E";

.radioButton {
  font-family: $fontBase;
  font-size: 16px;
  height: 24px;
}

// Hide the actual radio button
.radioButtonInput { display: none; }

// We're taking advantage of the :before on the label to render the radio button with that, using
// a data uri svg as the literal button.
.radioButtonInput + .radioButtonLabel:before {
  content: ' ';
  display: inline-block;
  background-image: url($radioInactiveDataUri);

  width: 18px;
  height: 18px;
  margin-right: 16px;

  position: relative;
  bottom: -3px;
}
.noText .radioButtonLabel:before { margin-right: 0px; }

.radioButtonInput + .radioButtonLabel {
  color: $gray700;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// A hovered or selected radio button should be darker than an inactive one.
.radioButtonInput:checked + .radioButtonLabel,
.radioButtonInput + .radioButtonLabel:hover { 
  color: $midnight;
}
.radioButtonInput + .radioButtonLabel:hover:before {
  background-image: url($radioInactiveDataUri);
}
.radioButtonInput:checked + .radioButtonLabel:before {
  background-image: url($radioActiveDataUri);
}

// But not if it is disabled
.radioButtonInput:disabled + .radioButtonLabel:hover {
  cursor: default;
}
.radioButtonInput:disabled:not(:checked) + .radioButtonLabel:hover {
  color: $gray700;
}
.radioButtonInput:disabled:not(:checked) + .radioButtonLabel:before {
  background-image: url($radioDisabledInactiveDataUri);
}
.radioButtonInput:disabled:checked + .radioButtonLabel:before {
  background-image: url($radioDisabledActiveDataUri);
}


// RULES FOR LEGACY CONTEXT
.contextLegacy.radioButton {
  font-size: 14px;
}
.radioButtonInput + .contextLegacy.radioButtonLabel:before {
  margin-right: 10px;
  bottom: -4px;
}