.ui-checkbox {
  cursor: pointer;
  display: flex;
  font-family: var(--tx-generic-font-secondary-font-family), var(--tx-generic-font-secondary-generic-family);
  font-weight: var(--tx-generic-font-primary-weight-regular);
  padding: 0;
  user-select: none;

  &.ui-checkbox_is-disabled {
    cursor: default;
    color: var(--tx-checkbox-text-disabled-color);
  }

  input[type="checkbox"] {
    display: none;

    & ~ .ui-checkbox__text {
      color: var(--tx-checkbox-text-color);
      padding-left: 25px;
      position: relative;
      -webkit-tap-highlight-color: transparent;

      &:before {
        background-color: var(--tx-checkbox-text-background-color);
        border: 2px solid var(--tx-checkbox-text-border-color);
        content: '';
        height: 12px;
        left: 0;
        position: absolute;
        top: 0;
        width: 12px;
      }
    }

    & ~ .ui-checkbox__text:before {
      border-radius: 3px;
    }

    & ~ .ui-checkbox__text:hover {
      color: var(--tx-checkbox-text-hover-color);
    }

    &:checked {
      & ~ .ui-checkbox__text {
        &:before {
          background: var(--tx-checkbox-text-checked-background-color);
          border-color: var(--tx-checkbox-text-checked-border-color);
          border-radius: 3px;
        }

        &:after {
          background: transparent;
          border: 3px solid var(--tx-checkbox-text-icon-checked-border-color);
          border-radius: 3px;
          border-right: none;
          border-top: none;
          content: '';
          height: 4px;
          left: 3px;
          position: absolute;
          top: 3px;
          transform: rotate(-45deg);
          width: 7px;
        }
      }
    }

    &:disabled {
      & ~ .ui-checkbox__text {
        color: var(--tx-checkbox-text-disabled-color);

        &:before {
          border-color: var(--tx-checkbox-text-disabled-border-color);
        }
      }
    }
  }
}