function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import { styled } from '../styles';
import { FILL } from './constants';
import { isIntrinsic, isFixed } from './utils';
export var StyledRoot = styled('div', function (_ref) {
  var $theme = _ref.$theme,
      _ref$$fill = _ref.$fill,
      $fill = _ref$$fill === void 0 ? FILL.intrinsic : _ref$$fill,
      _ref$$height = _ref.$height,
      $height = _ref$$height === void 0 ? 'fit-content' : _ref$$height,
      _ref$$width = _ref.$width,
      $width = _ref$$width === void 0 ? 'fit-content' : _ref$$width;
  var style = {
    backgroundColor: $theme.colors.backgroundTertiary,
    borderRadius: $theme.sizing.scale500,
    boxSizing: 'border-box',
    isolation: 'isolate',
    padding: $theme.sizing.scale100,
    position: 'relative',
    overflow: 'hidden',
    height: $height,
    width: $width
  };

  if (isIntrinsic($fill)) {
    style['::-webkit-scrollbar'] = {
      display: 'none'
    };
    style['-ms-overflow-style'] = 'none';
    style.scrollbarWidth = 'none';
  }

  return style;
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
export var StyledSegmentList = styled('div', function (_ref2) {
  var $theme = _ref2.$theme;
  var style = {
    backgroundColor: $theme.colors.backgroundTertiary,
    boxSizing: 'border-box',
    display: 'flex',
    height: '100%',
    justifyContent: 'space-evenly',
    position: 'relative',
    width: '100%',
    zIndex: -2,
    flexDirection: 'row',
    overflow: 'hidden',
    minHeight: '40px'
  };
  return style;
});
StyledSegmentList.displayName = "StyledSegmentList";
StyledSegmentList.displayName = 'StyledSegmentList';
export var StyledSegment = styled('button', function (_ref3) {
  var $theme = _ref3.$theme,
      _ref3$$fill = _ref3.$fill,
      $fill = _ref3$$fill === void 0 ? FILL.intrinsic : _ref3$$fill,
      _ref3$$focusVisible = _ref3.$focusVisible,
      $focusVisible = _ref3$$focusVisible === void 0 ? false : _ref3$$focusVisible,
      _ref3$$isActive = _ref3.$isActive,
      $isActive = _ref3$$isActive === void 0 ? false : _ref3$$isActive,
      _ref3$$hasArtwork = _ref3.$hasArtwork,
      $hasArtwork = _ref3$$hasArtwork === void 0 ? false : _ref3$$hasArtwork,
      _ref3$$hasLabel = _ref3.$hasLabel,
      $hasLabel = _ref3$$hasLabel === void 0 ? true : _ref3$$hasLabel;
  var style = {
    cursor: 'pointer',
    position: 'relative',
    WebkitAppearance: 'none',
    marginLeft: '0',
    marginRight: '0',
    marginTop: '0',
    marginBottom: '0',
    boxSizing: 'border-box',
    display: 'grid',
    gridAutoRows: 'auto',
    gridTemplateColumns: 'repeat(2, auto)',
    alignItems: 'center',
    paddingInline: $theme.sizing.scale600,
    paddingBlock: $theme.sizing.scale300,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
    borderRadius: $theme.sizing.scale300,
    color: $theme.colors.contentPrimary,
    backgroundColor: 'transparent',
    flexGrow: 1,
    transitionProperty: 'box-shadow',
    transitionDuration: $theme.animation.timing200,
    transitionTimingFunction: $theme.animation.linearCurve,
    outline: 'none',
    outlineOffset: '-3px',
    justifyContent: 'center',
    overflow: 'hidden',
    ':hover': {
      boxShadow: $isActive ? 'none' : $theme.lighting.overlay100,
      zIndex: $isActive ? 'none' : -2
    },
    ':disabled': {
      cursor: 'not-allowed',
      color: $theme.colors.contentStateDisabled,
      ':hover': {
        boxShadow: 'none'
      }
    },
    ':disabled:hover': {
      background: 'none'
    }
  };

  if ($focusVisible) {
    style.outline = "3px solid ".concat($theme.colors.accent);
  }

  if (isFixed($fill)) {
    style.flexGrow = 1;
    style.flexBasis = 0;
  }

  if ($hasArtwork === true && $hasLabel === true) {
    style.gridColumnGap = $theme.sizing.scale300;
  }

  return style;
});
StyledSegment.displayName = "StyledSegment";
StyledSegment.displayName = 'StyledSegment';
export var StyledArtworkContainer = styled('div', function (_ref4) {
  _objectDestructuringEmpty(_ref4);

  var style = {
    display: 'flex',
    height: '16px',
    width: '16px',
    alignItems: 'center'
  };
  return style;
});
StyledArtworkContainer.displayName = "StyledArtworkContainer";
StyledArtworkContainer.displayName = 'StyledArtworkContainer';
export var StyledActive = styled('div', function (_ref5) {
  var $theme = _ref5.$theme,
      _ref5$$length = _ref5.$length,
      $length = _ref5$$length === void 0 ? 0 : _ref5$$length,
      _ref5$$distance = _ref5.$distance,
      $distance = _ref5$$distance === void 0 ? 0 : _ref5$$distance,
      _ref5$$animate = _ref5.$animate,
      $animate = _ref5$$animate === void 0 ? false : _ref5$$animate;
  var style = {
    position: 'absolute',
    borderRadius: $theme.sizing.scale300,
    boxSizing: 'border-box',
    height: '100%',
    width: '100%',
    border: "".concat($theme.sizing.scale0, " solid ").concat($theme.colors.primary),
    backgroundColor: $theme.colors.backgroundPrimary,
    zIndex: -1
  };
  style.bottom = '0px';
  style.left = '0px';
  style.width = "".concat($length, "px");
  style.transform = "translateX(".concat($distance, "px)");

  if ($animate) {
    style.transitionProperty = 'all';
    style.transitionDuration = $theme.animation.timing400;
    style.transitionTimingFunction = $theme.animation.easeInOutQuinticCurve;
  }

  return style;
});
StyledActive.displayName = "StyledActive";
StyledActive.displayName = 'StyledActive';
export var StyledSegmentPanel = styled('div', function (_ref6) {
  var $theme = _ref6.$theme,
      _ref6$$pad = _ref6.$pad,
      $pad = _ref6$$pad === void 0 ? true : _ref6$$pad;
  var style = {
    flexGrow: 1,
    outline: 'none'
  };

  if ($pad) {
    style.paddingTop = $theme.sizing.scale600;
    style.paddingRight = $theme.sizing.scale600;
    style.paddingBottom = $theme.sizing.scale600;
    style.paddingLeft = $theme.sizing.scale600;
  }

  return style;
});
StyledSegmentPanel.displayName = "StyledSegmentPanel";
StyledSegmentPanel.displayName = 'StyledSegmentPanel';
export var StyledLabel = styled('div', function (_ref7) {
  var $theme = _ref7.$theme,
      $hasArtwork = _ref7.$hasArtwork;

  var style = _objectSpread(_objectSpread({}, $theme.typography.LabelSmall), {}, {
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  });

  if (!$hasArtwork) {
    style.gridColumn = '1 / 3';
  }

  return style;
});
StyledLabel.displayName = "StyledLabel";
export var StyledDescription = styled('div', function (_ref8) {
  var $theme = _ref8.$theme;
  return _objectSpread(_objectSpread({}, $theme.typography.ParagraphXSmall), {}, {
    padding: 0,
    margin: 0,
    gridColumn: '1 / 3',
    gridRow: '2 / 3',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis'
  });
});
StyledDescription.displayName = "StyledDescription";