import { css } from 'styled-components';
import { getValueFromNumberOrString, isNumber } from '../../common/utils';
var flexAutoHeightStyles = css(["min-height:0;flex-grow:1;flex-shrink:1;flex-basis:auto;"]);
export var scrollStyles = css(["", " overflow-y:auto;width:100%;"], function (p) {
  return p.maxHeight ? "max-height: ".concat(getValueFromNumberOrString(p.maxHeight, p.theme), ";") : flexAutoHeightStyles;
});
export var scrollDesktopStyles = css(["", "{", "}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
}, scrollStyles);
export var fadeStyles = css(["position:relative;", ";"], function (p) {
  return isNumber(p.intersectionTopRatio) ? "-webkit-mask-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, ".concat(p.intersectionTopRatio, ") 0%,\n    rgba(0, 0, 0, 1) ").concat(p.fadeTopPercentage, "%,\n    rgba(0, 0, 0, 1) ").concat(p.fadeBottomPercentage, "%,\n    rgba(0, 0, 0, ").concat(p.intersectionBottomRatio, ") 100%\n    )") : '';
});
export var intersectionStyles = css(["height:", "px;width:", "px;position:absolute;right:0;pointer-events:none;"], function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(1);
});
export var containerStyles = css(["", ""], function (p) {
  return !p.maxHeight && "\n    display: flex;\n    height: 100%;\n\n    ".concat(flexAutoHeightStyles, "\n  ");
});
export var scrollerStyles = css(["", " ", ""], function (p) {
  return !p.maxHeight && "\n    flex-grow: 1;\n    width: 100%; /*IE fix*/\n  ";
}, function (p) {
  return p.enableMobileFade ? scrollStyles : scrollDesktopStyles;
});