How to use the polythene-core-css.sel function in polythene-core-css

const backdrop = (selector, vars) => // eslint-disable-line no-unused-vars
  sel(selector, {
    ".pe-dialog--visible .pe-dialog__backdrop": {
      display: "block",
      opacity: 1,
    }
  });

border_radius: (selector, vars) => [
    !vars.full_screen && sel(selector, {
      " .pe-dialog__content": {
        borderTopLeftRadius: vars.border_radius + "px",
        borderTopRightRadius: vars.border_radius + "px",
        borderBottomLeftRadius: vars.border_radius + "px",
        borderBottomRightRadius: vars.border_radius + "px",
      },
    }),
  ],
  // Theme vars

general_styles: selector => [
    sel(selector, {
      display: "flex",
    })
  ],
};

["color_" + tint + "_text"]: (selector, vars) => [
    sel(selector, {
      " .pe-toolbar__title": {
        "&, a:link, a:visited": {
          color: vars["color_" + tint + "_text"],
        }
      }
    })
  ],
  ["color_" + tint + "_background"]: (selector, vars) => [

const title_single_padding_v_title_padding_h = (selector, vars) =>
  sel(selector, {
    " .pe-notification__title": {
      padding: vars.title_single_padding_v + "px " + vars.title_padding_h + "px",
    },
  });

["color_" + tint + "_overlay_background"]: (selector, vars) => [
    sel(selector, {
      " .pe-card__overlay__content": {
        backgroundColor: vars["color_" + tint + "_overlay_background"]
      }
    })
  ],
});

const insetH = (selector, vars) => {
  const margin = vars.inset_h_size;

  return sel(selector, {
    marginLeft: margin + "px",
    marginRight: margin + "px",

    " .pe-list-tile__content": {
      marginLeft: -margin + "px",
      marginRight: -margin + "px",
    }
  });
};

height: (selector, vars) => [
    vars.height !== undefined && sel(selector, {
      " .pe-menu__panel": {
        height: vars.height
      }
    })
  ],
  widths: (selector, vars) => [