// CUSTOM CHECKBOXES
// Completely replaces legacy checkbox
.checkbox [type='checkbox'], .radiobox [type='radio'], #lang-checkbox
  position: fixed
  top: -1px
  left: -1px
  width: 1px
  height: 1px
  overflow: hidden
  display: none

.checkbox, .radiobox
  position: relative
  display: inline-block

  label
    display: block
    height: 20px
    width: 20px
    background-color: var(--color-grey-lighter)
    box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
    border: 2px solid var(--color-primary)
    border-radius: 4px
    color: white
    cursor: pointer

  &.radiobox label
    border-radius: 10px


  &.checkbox
    label::before,
    label::after
      position: absolute
      display: block
      top: 12px
      left: 8px
      height: 2px
      width: 8px
      background-color: var(--color-font)

    \:checked + label
      background-color: var(--color-primary)

    [type='checkbox']:focus + label
      border-color: #3273dc
      box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
      outline: 0

    \:checked + label::before,
    :checked + label::after
      content: ''

    \:checked + label::before
      background-color: white
      transform: rotate(45deg)
      left: 2px
      top: 11px

    \:checked + label::after
      background-color: white
      transform: rotate(-45deg)
      top: 9px
      width: 12px
      left: 7px

  &.radiobox
    label::before
      position: absolute
      display: block
      top: 6.5px
      left: 6.5px
      height: 7px
      width: 7px
      border-radius: 3.5px
      background-color: var(--color-font)

    \:checked + label
      background-color: var(--color-primary)

    [type='radio']:focus + label
      border-color: #3273dc
      box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
      outline: 0

    \:checked + label::before
      content: ''

    \:checked + label::before
      background-color: white

  [disabled] + label, [readonly] + label
    pointer-events: none
    border: none
    opacity: 0.6
    filter: grayscale(1)

// special treatment for checkboxes in table headers
th .checkbox
  margin-right: 7px
  vertical-align: bottom

th .checkbox:only-child
  margin: 0

.checkbox-only
  width: 36px