Welcome To Our Shell

Mister Spy & Souheyl Bypass Shell

/**
 * @file
 * Checkbox and radio input elements.
 */

@import "../base/variables.pcss.css";

:root {
  --form-boolean-radio-icon-size: 17px;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: var(--sp1-5);
  height: var(--sp1-5);
  vertical-align: text-bottom;
  border: var(--form-element-border-size-base) solid var(--color--gray-30);
  border-radius: var(--border-radius-base);
  background-color: var(--color--gray-95);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: var(--sp1) var(--sp1);
  appearance: none;

  &:focus {
    outline: var(--outline--thick);
    box-shadow: var(--shadow-focusable);

    @supports (outline-style: double) {
      outline-style: double;
    }
  }

  &:hover {
    border-color: var(--color--blue-70);
  }

  &[disabled] {
    opacity: 0.3;
  }

  &.error {
    border-color: var(--color--red);
  }

  /* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
  &.error::-ms-check {
    border: 1px solid var(--color--red);
  }
}

input[type="checkbox"] {
  &:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%232494DB' d='M14.8232 0.176777C14.9209 0.0791457 15.0791 0.0791455 15.1768 0.176777L16.9445 1.94454C17.0422 2.04217 17.0422 2.20047 16.9445 2.2981L6.23744 13.0052C6.13981 13.1028 5.98151 13.1028 5.88388 13.0052L0.176777 7.2981C0.0791456 7.20047 0.0791456 7.04218 0.176777 6.94454L1.94454 5.17678C2.04217 5.07915 2.20047 5.07915 2.2981 5.17678L5.88388 8.76256C5.98151 8.86019 6.13981 8.86019 6.23744 8.76256L14.8232 0.176777Z'/%3E%3C/svg%3E%0A");
  }
}

input[type="radio"] {
  border-radius: 50%;

  &:checked {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
    background-size: var(--form-boolean-radio-icon-size) var(--form-boolean-radio-icon-size);
  }
}

.form-type-boolean {
  clear: both;
  margin-inline-start: var(--sp2);

  & input[type="checkbox"],
  & input[type="radio"] {
    position: relative;
    top: var(--sp0-5);
    float: inline-start;
    margin-inline-start: calc(var(--sp2) * -1);
    transform: translateY(-50%);
  }

  &.form-no-label {
    margin-inline-start: 0;

    & input[type="checkbox"],
    & input[type="radio"] {
      position: static;
      float: none;
      margin-inline: 0;
      transform: none;
    }
  }

  & .form-item__description,
  & .form-item--error-message {
    margin-inline-start: calc(var(--sp2) * -1);
  }
}

.form-boolean-group .form-type-boolean {
  margin-block: var(--sp1);
}

.container-inline .form-boolean-group .form-type-boolean:not(:last-child) {
  margin-inline-end: var(--sp);
}