digitransit-ui/app/component/checkbox.scss

.option-checkbox-container {
  display: flex;

  &.large {
    max-height: 55px;

    > span {
      font-weight: $font-weight-book;
      user-select: none;
      line-height: 4;
    }
  }

  .option-checkbox {
    position: relative;
    margin-right: 2em;

    &.large {
      margin-right: 1em;
      margin-bottom: 1em;
      margin-top: 1em;

      label {
        height: 32px;
        width: 32px;
        position: relative;

        &.checked {
          border: #007ac9 1px solid;

          &.disabled {
            color: $gray;
            border: #78909c 1px solid;
          }
        }
      }
    }

    label {
      height: 20px;
      width: 20px;
      border: 1px solid #78909c;
      border-radius: 4px;
      background-color: $white;
      cursor: pointer;
      position: absolute;
      left: 0;

      &:hover {
        border: 1px solid $primary-color;
      }

      &.checked {
        border: #007ac9 1px solid;

        &::before {
          color: $primary-color;
          font-family: $font-family;
          font-size: 1.25em;
          font-weight: $font-weight-medium;
          line-height: 1;
          margin-left: 0.1em;
          margin-top: 0.2em;
          transform: rotateY(15deg);
        }

        &.disabled::before {
          color: $gray;
        }
      }

      span > svg {
        color: $primary-color;
      }

      &.disabled {
        background: $light-gray;
        cursor: not-allowed;
        pointer-events: none;

        span > svg {
          color: #888;
        }
      }
    }

    input[type='checkbox'] {
      height: 20px;
      left: 0;
      position: absolute;
      top: 0;
      display: none;
      width: 20px;
    }
  }

  > span {
    font-weight: $font-weight-book;
    user-select: none;
  }

  .checkmark {
    position: absolute;
    margin-left: 0.2em;
    margin-top: 0.15em;
  }
}