"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ReactionContainer = exports.ReactionBadge = exports.Overlay = exports.MenuItem = exports.Delimeter = exports.ContextMenu = exports.ContainerInteractions = exports.ArrowButton = void 0;
var _native = _interopRequireDefault(require("styled-components/native"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ContainerInteractions = exports.ContainerInteractions = _native.default.View`
  position: absolute;
  z-index: 1000;
`;
const ReactionContainer = exports.ReactionContainer = _native.default.View`
  max-width: 245px;
  display: flex;
  margin-bottom: 16px;
  gap: 8px;
  padding: 8px;
  justify-content: space-around;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;
const ReactionBadge = exports.ReactionBadge = _native.default.Text`
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.2);
  }
`;
const ArrowButton = exports.ArrowButton = _native.default.View`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;

  transform: ${({
  isRotated
}) => isRotated ? 'rotate(180deg)' : 'rotate(0deg)'};
`;
const ContextMenu = exports.ContextMenu = _native.default.View`
  position: absolute;
  z-index: 1000;
  background-color: white;
  border-radius: 8px;
  elevation: 4;
  shadow-color: #121219;
  shadow-offset: 0px 4px;
  shadow-opacity: 0.1;
  shadow-radius: 6px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
`;
const MenuItem = exports.MenuItem = _native.default.Pressable`
  padding: 8px 8px;
  min-width: 150px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;
const Overlay = exports.Overlay = _native.default.Pressable`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
`;

// Horizontal hairline divider. Was `border: 1px solid …` — a border on
// ALL FOUR sides of an auto-sized View. iOS collapsed it to ~nothing, but
// Android rendered the side borders too, so the menu showed ugly little
// boxes / uneven gaps between items. A single full-width 1px line renders
// identically on both platforms.
const Delimeter = exports.Delimeter = _native.default.View`
  height: 1px;
  align-self: stretch;
  background-color: #0052cd1f;
  margin-top: 4px;
  margin-bottom: 4px;
`;
//# sourceMappingURL=ContextMenuComponents.js.map