// Extensions
.sidr-class-clear,
.clear {
  clear: both;
}

.sidr-class-noheight,
.noheight {
  height: 0;
  line-height: 0;
  font-size: 0;
  display: block;
  overflow: hidden;
}

.invisible {
  visibility: hidden;
}

.sidr-class-offscreen,
.offscreen {
  position: absolute;
  left: -9999em;
}

%fake-check {
  span {
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin: 3px 0;
  }

  input {
    position: absolute;
    height: 1px; // kann nicht einfach 0x0 sein, sonst gibt der
    width: 1px; // Edge keine Required-Fehlermeldungen aus
    border: transparent;
    display: inline-block;
    overflow: hidden;
    margin-top: 3px;
    margin-left: 3px;
  }

  input + label {
    display: inline-block;
    line-height: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    padding: 0 10px 0 35px;
    margin-right: 30px;
    font-weight: normal;

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: inline-block;
      background: $bg_white;
      height: 16px;
      width: 16px;
      margin-right: 10px;
      vertical-align: middle;
      border: 1px solid $border_color;
    }

    &:after {
      position: absolute;
      top: 4px;
      left: 4px;
      content: "";
      display: inline-block;
      background: $border_color;
      height: 10px;
      width: 10px;
      margin-right: 10px;
      vertical-align: middle;
      opacity: 0;
    }
  }

  input:not(:disabled) + label {
    &:hover,
    &:focus {
      &:after {
        opacity: .5;
      }
    }
  }

  input:disabled + label {
    color: $text;

    &:before {
      border-color: $border_color;
    }

    &:after {
      background: $border_color;
    }
  }

  input:checked + label:after {
    opacity: 1;
  }

  input:invalid + label:before {
    box-shadow: 0 0 5px red;
  }
}

%fake-radio {
  @extend %fake-check;

  input + label {
    &:before,
    &:after {
      border-radius: 20px;
    }
  }
}

%link-hover-underline {
  text-decoration: none;

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}