@import "../../styles/variables.scss";

.radio {
  background-color: $brand-blue;
}

.radioContainer {
  align-items: center;
  display: flex;
  position: relative;
  padding-left: $base-checkbox-size + $base-spacing + ($s-spacing / 2);
  margin-bottom: $base-spacing;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: $base-checkbox-size;

  /* Hide the browser's default radio button */
  input {
    position: absolute;
    opacity: 0;
    left: -9999px !important;

    /* When the radio button is checked, add blue border-color */
    &:checked ~ .customRadio {
      border-color: $brand-blue;

      /* Show the indicator (dot/circle) when checked */
      &:after {
        display: block;
      }
    }

    &:checked ~ .radioLabel {
      color: $brand-blue;
    }

    &:disabled ~ .customRadio {
      background-color: $brand-nearWhite;
      border-color: $brand-lightGrey;
      cursor: default;
    }

    &:disabled ~ .radioLabel {
      color: $brand-grey;
      cursor: default;
    }
  }

  /* On mouse-over, change border-color */
  &:hover input ~ .customRadio {
    border-color: $brand-blue;
  }

  &:hover input:checked ~ .customRadio {
    border-color: $brand-blue;
  }

  /* Style the indicator (dot/circle) */
  .customRadio:after {
    top: $base-checkbox-size * 0.15;
    left: $base-checkbox-size * 0.15;
    width: $base-checkbox-size / 2;
    height: $base-checkbox-size / 2;
    border-radius: 50%;
    background: $brand-blue;
  }
}

/* Create a custom radio button */
.customRadio {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: $base-checkbox-size;
  width: $base-checkbox-size;
  border: 2px solid $brand-lightGrey;
  border-radius: 50%;

  /* Create the indicator (the dot/circle - hidden when not checked) */
  &:after {
    content: "";
    position: absolute;
    display: none;
  }
}

.radioLabel {
  cursor: pointer;
}