"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CarouselArrow = void 0;
var react_1 = __importDefault(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleguide_1 = require("../utils/styleguide");
var classnames_1 = require("../utils/classnames");
var chevron_left_svg_1 = __importDefault(require("../../svg/chevron-left.svg"));
var chevron_right_svg_1 = __importDefault(require("../../svg/chevron-right.svg"));
exports.CarouselArrow = function (_a) {
    var left = _a.left, right = _a.right, onClick = _a.onClick, hide = _a.hide, className = _a.className, props = __rest(_a, ["left", "right", "onClick", "hide", "className"]);
    if (!left && !right) {
        throw new Error('either "left" or "right" prop is required');
    }
    else if (left && right) {
        throw new Error('cannot have both "left" and "right" props');
    }
    var cls = classnames_1.cn('lwc-arrow', { 'lwc-left': left, 'lwc-right': right, 'lwc-hide': hide }, className);
    return (react_1.default.createElement(Arrow, __assign({}, props, { className: cls, onClick: onClick }),
        left && react_1.default.createElement("img", { src: chevron_left_svg_1.default, alt: "page left" }),
        right && react_1.default.createElement("img", { src: chevron_right_svg_1.default, alt: "page right" })));
};
var Arrow = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  display: block;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 0 none;\n  \n  color: ", ";\n  background-color: ", ";\n  box-shadow:\n    ", ",\n    inset 0 0 4px 0 rgb(0 0 0 / 0.05);\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: all .1s ease;\n  }\n  \n  &:not(:disabled):hover {\n    cursor: pointer;\n    box-shadow:\n      ", ",\n      inset 0 0 4px 0 rgb(0 0 0 / 0.05);\n    transform: scale(1.05) translateY(-2px);\n  }\n\n  @media (hover: none), (hover: on-demand) {\n    &:not(:disabled):hover {\n      box-shadow:\n        ", ",\n        inset 0 0 4px 0 rgb(0 0 0 / 0.05); \n      transform: unset;\n    }\n  }\n\n  &:not(:disabled):active {\n    background: ", ";\n  }\n\n  &:disabled {\n    opacity: .6;\n  }\n\n  &.lwc-hide {\n    visibility: hidden;\n    transform: scale(0);\n\n    @media (prefers-reduced-motion: no-preference) {\n      transition: all .15s ease-in;\n    }\n  }\n\n  width: 48px;\n  height: 48px;\n\n  & svg, & img {\n    width: 16px;\n    height: 16px;\n  }\n\n  top: calc(50% - 24px);\n  &.lwc-left {\n    left: ", ";\n  }\n  &.lwc-right {\n    right: ", ";\n  }\n  z-index: 1;\n\n\n  @media ", " {\n    width: 64px;\n    height: 64px;\n\n    & svg, & img {\n      width: 24px;\n      height: 24px;\n    }\n\n    top: calc(50% - 32px);\n\n    &.lwc-left {\n      left: ", ";\n    }\n    &.lwc-right {\n      right: ", ";\n    }\n  }\n"], ["\n  position: absolute;\n  display: block;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  border: 0 none;\n  \n  color: ", ";\n  background-color: ", ";\n  box-shadow:\n    ", ",\n    inset 0 0 4px 0 rgb(0 0 0 / 0.05);\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: all .1s ease;\n  }\n  \n  &:not(:disabled):hover {\n    cursor: pointer;\n    box-shadow:\n      ", ",\n      inset 0 0 4px 0 rgb(0 0 0 / 0.05);\n    transform: scale(1.05) translateY(-2px);\n  }\n\n  @media (hover: none), (hover: on-demand) {\n    &:not(:disabled):hover {\n      box-shadow:\n        ", ",\n        inset 0 0 4px 0 rgb(0 0 0 / 0.05); \n      transform: unset;\n    }\n  }\n\n  &:not(:disabled):active {\n    background: ", ";\n  }\n\n  &:disabled {\n    opacity: .6;\n  }\n\n  &.lwc-hide {\n    visibility: hidden;\n    transform: scale(0);\n\n    @media (prefers-reduced-motion: no-preference) {\n      transition: all .15s ease-in;\n    }\n  }\n\n  width: 48px;\n  height: 48px;\n\n  & svg, & img {\n    width: 16px;\n    height: 16px;\n  }\n\n  top: calc(50% - 24px);\n  &.lwc-left {\n    left: ", ";\n  }\n  &.lwc-right {\n    right: ", ";\n  }\n  z-index: 1;\n\n\n  @media ", " {\n    width: 64px;\n    height: 64px;\n\n    & svg, & img {\n      width: 24px;\n      height: 24px;\n    }\n\n    top: calc(50% - 32px);\n\n    &.lwc-left {\n      left: ", ";\n    }\n    &.lwc-right {\n      right: ", ";\n    }\n  }\n"])), styleguide_1.color.gray800, styleguide_1.color.gray100, styleguide_1.shadow.button, styleguide_1.shadow.buttonHover, styleguide_1.shadow.button, styleguide_1.color.gray200, styleguide_1.space._8, styleguide_1.space._8, styleguide_1.device._768, styleguide_1.space._16, styleguide_1.space._16);
var templateObject_1;
