"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

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 = styleh_components_1.styled.div`
  margin-right: 20px;
  display: flex;
  align-items: center;
`;
exports.ToggleItemWrapper = ToggleItemWrapper;
const ToggleItemIconWrapper = styleh_components_1.styled.span`
  margin-right: 10px;
  display: flex;
  align-items: center;
`;
exports.ToggleItemIconWrapper = ToggleItemIconWrapper;
const ToggleItemLabel = styleh_components_1.styled.withComponent(Label_1.default)``;
exports.ToggleItemLabel = ToggleItemLabel;
const StyledCheckboxIcon = styleh_components_1.styled.withComponent(CheckBoxIcon_1.default)`
  width: rem(24);
  height: rem(24);
`;
exports.StyledCheckboxIcon = StyledCheckboxIcon; //# sourceMappingURL=styled.js.map