@import 'moda-themes/themes';

.mo-display-input__radio-button {
  font-family: font-family('sans');
  margin-bottom: 12px;
  color: color('black');
  font-size: 12px;

  input {
    display: none;

    & + label {
      cursor: pointer;

      span.mo-display-input__radio-button-dot-background {
        border: 1px solid color('cement');
        background-color: color('white');
        vertical-align: middle;
        margin: -1px 10px 0 0;
        display: inline-block;
        border-radius: 50%;
        height: 12px;
        width: 12px;
      }
    }

    &:checked + label {
      span.mo-display-input__radio-button-dot-background {
        background-color: color('transition-red-to-black');
        border: 1px solid color('transition-red-to-black');
      }

      span.mo-display-input__radio-button-dot-foreground {
        background-color: color('white');
        margin: -1px 15px 0 -17px;
        vertical-align: middle;
        display: inline-block;
        border-radius: 50%;
        cursor: pointer;
        height: 2px;
        width: 2px;
      }
    }
  }

  &-label-content {
    display: inline-block;
    vertical-align: middle;
  }
}