$formCheckDisabledColor: getCssVar(form-check-disabled-color);
$formMaterialColor: getCssVar(form-material-color);

.form-check {
  span {
    cursor: pointer;
    display: block;
  }

  input:not(.form-control) {
    cursor: pointer;

    &:disabled {
      cursor: default;
    }
  }

  input:not(.form-control):disabled + span {
    color: var($formCheckDisabledColor) !important;
    cursor: default;
  }
}

.form-field {
  &.inline .form-check {
    margin-left: 0;
  }

  .form-check {
    font-weight: initial;
    margin-bottom: 0;
    display: inline;
    align-self: flex-start;
  }
}

.form-material {
  .form-field:not(.form-default) {
    .form-check {
      position: initial;
      pointer-events: auto;
      color: inherit;

      input:not(.form-control) {
        position: absolute;
        pointer-events: none;
        opacity: 0;
      }

      input + span {
        position: relative;
        padding-left: 1.25rem;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          display: inline-block;
          width: 1rem;
          height: 1rem;
        }

        &::after {
          content: '';
          position: absolute;
          display: block;
          left: 0;
          top: 50%;
        }
      }

      input:disabled + span {
        &::before {
          border-color: var($formCheckDisabledColor) !important;
        }
      }

      input[type='checkbox']:checked:disabled + span {
        &::before {
          background-color: var($formCheckDisabledColor) !important;
        }
      }

      input[type='radio']:disabled + span {
        &::after {
          background-color: var($formCheckDisabledColor) !important;
        }
      }

      // For checkbox only
      input[type='checkbox'] + span {
        &::before {
          border: var(getCssVar(form-material-color)) solid 2px;
          border-radius: 2px;
          transition: background-color 0.2s ease;
        }

        &::after {
          width: 0.65rem;
          height: 0.4rem;
          border: solid 2px transparent;
          border-right: none;
          border-top: none;
          transform: translate(3px, -60%) rotate(-45deg);
          transition: border-color 0.16s ease;
        }
      }

      input[type='checkbox']:checked + span::after,
      input[type='checkbox']:indeterminate + span::after {
        border-color: #fff;
      }

      input[type='checkbox']:checked + span::before,
      input[type='checkbox']:indeterminate + span::before {
        background-color: var($formMaterialColor);
      }

      input[type='checkbox']:indeterminate + span::after {
        border-left: none;
        transform: translate(4px, 3px);
        width: 0.52rem;
      }

      // For radio only
      input[type='radio'] + span {
        &::before {
          border: var($formMaterialColor) solid 2px;
          border-radius: #{map-get($rounded, 'full')};
        }

        &::after {
          width: 1rem;
          height: 1rem;
          background-color: var($formMaterialColor);
          transform: scale(0) translateY(-100%);
          transition: transform 0.2s ease;
          border-radius: #{map-get($rounded, 'full')};
        }

        &.full::after {
          transform: scale(0) translateY(-50%);
        }
      }

      input[type='radio']:checked + span {
        &::after {
          transform: scale(0.5) translateY(-100%);
        }

        &.full::after {
          transform: scale(1) translateY(-50%);
        }
      }
    }
  }
}