"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.accordionStyle = void 0;

var _ThemeProvider = require("../ThemeProvider");

var accordionStyle = function accordionStyle(_ref, theme) {
  var isDisabled = _ref.isDisabled,
      isExpanded = _ref.isExpanded;
  return {
    style: {
      width: '100%'
    },
    item: {//
    },
    header: {
      display: 'flex',
      alignItems: 'center',
      position: 'relative',
      width: '100%',
      py: 'spacing',
      transition: 'all 0.2s',
      borderBottom: '1px',
      borderColor: 'border',
      _focus: {
        boxShadow: 'outline'
      },
      // _hover: { bg: 'blackAlpha.50' },
      _disabled: {
        opacity: '0.4',
        cursor: 'not-allowed'
      },
      outline: '0',
      flex: 1
    },
    panel: {
      p: ['spacing-sm', 'spacing']
    },
    icon: {
      position: 'absolute',
      right: 0,
      opacity: isDisabled ? 0.4 : 1,
      transform: isExpanded ? 'rotate(-180deg)' : null,
      transition: 'transform 0.2s',
      transformOrigin: 'center'
    }
  };
};

exports.accordionStyle = accordionStyle;

var useAccordionStyle = function useAccordionStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].accordion ? theme['styles'].accordion(props, theme) : accordionStyle(props, theme);
  return {
    root: styles.style,
    item: styles.item,
    header: styles.header,
    panel: styles.panel,
    icon: styles.icon
  };
};

var _default = useAccordionStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map