// Custom checkboxes

// rule filter to block browsers that don't support that selector from applying rules they shouldn't
.custom-checkbox:not(#unsupported) {
  cursor: pointer;

  input {
    opacity: 0;
    width: 20px;

    &:focus + .custom-checkbox-element {
      box-shadow: 0 0 0 1px @inputBorderFocus;
      outline: thin dotted;
    }
  }

  .custom-checkbox-element {
    display: inline-block;
    background:#fff;
    width: 17px; height: 17px; line-height: 16px;
    margin: 0 0 2px 0;
    .margin-right(@rtl, @spacingXs);
    .margin-left(@rtl, -20px);
    border: 1px solid @inputBorder;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;

    &:after {
      content: "\EA1A";
      font-family: 'Viadeoicons';
      font-size: 10px;
      color: tint(@black, 20%);
      visibility: hidden;
    }
  }

  &:hover {
    .custom-checkbox-element {
      border-color: shade(@inputBorder, 25%);
    }
  }

  input:checked + .custom-checkbox-element {
    &:after {
      visibility: visible;
    }
  }
}