"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Label_1 = __importDefault(require("atoms/Text/Label"));
const CheckBoxIcon_1 = __importDefault(require("atoms/Icons/CheckBoxIcon"));
/**
 * @todo this was styled.li
 * - but we need li + <label>
 * - to be semantic + accessible
 */
const ToggleItemWrapper = styled.withComponent(Label_1.default).qa('qa-facet') `
  margin-right: 20px;
  display: flex;
  align-items: center;
`;
exports.ToggleItemWrapper = ToggleItemWrapper;
const ToggleItemIconWrapper = styled.span `
  margin-right: 10px;
  display: flex;
  align-items: center;
`;
exports.ToggleItemIconWrapper = ToggleItemIconWrapper;
const ToggleItemLabel = styled.withComponent(Label_1.default) ``;
exports.ToggleItemLabel = ToggleItemLabel;
const StyledCheckboxIcon = styled.withComponent(CheckBoxIcon_1.default) `
  width: rem(24);
  height: rem(24);
`;
exports.StyledCheckboxIcon = StyledCheckboxIcon;
//# sourceMappingURL=styled.js.map