/* Min breakpoint width */
/* MAx breakpoint width */

.custom-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer; }
  .custom-checkbox__field {
    min-width: 32px;
    height: 32px;
    position: relative;
    display: inline-block; }
    .custom-checkbox__field input {
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      position: absolute;
      z-index: 23;
      display: block;
      margin: 0;
      border-radius: 50%;
      width: 32px;
      background-color: var(--color-primary);
      height: 32px;
      box-shadow: none;
      outline: none;
      opacity: 0;
      transition: opacity var(--anim-transition-time), transform var(--anim-transition-time);
      cursor: pointer; }
      .custom-checkbox__field input + span {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        z-index: var(--z-index-checkbox); }
        .custom-checkbox__field input + span::before {
          content: '';
          position: absolute;
          left: 25%;
          top: 25%;
          display: inline-block;
          box-sizing: border-box;
          border: solid 2px;
          border-color: rgba(0, 0, 0, 0.87);
          border-radius: 2px;
          width: 16px;
          height: 16px;
          vertical-align: top;
          transition: border-color var(--anim-transition-time), background-color var(--anim-transition-time); }
        .custom-checkbox__field input + span::after {
          content: '';
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 8px;
          height: 3px;
          border: solid 2px transparent;
          border-right: none;
          border-top: none;
          transform: translate(-50%, -70%) rotate(-45deg); }
      .custom-checkbox__field input:checked {
        background-color: var(--color-primary); }
        .custom-checkbox__field input:checked + span::after {
          border-color: var(--color-white); }
        .custom-checkbox__field input:checked + span::before {
          border-color: var(--color-primary);
          background-color: var(--color-primary); }
        .custom-checkbox__field input:checked:active + span::before {
          border-color: transparent;
          background-color: var(--color-primary); }
        .custom-checkbox__field input:checked:disabled + span::before {
          border-color: transparent;
          background-color: var(--color-black-disabled-text); }
  .custom-checkbox .text {
    color: rgba(0, 0, 0, 0.87);
    line-height: normal; }