'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const SegmentWrapper = styled__default['default'].button.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'hasFocus',
        'segmentPadding',
        'isActive',
    ]),
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${(props) => props.segmentPadding};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  border: 2px solid transparent;
  background: transparent;
  border-radius: ${({ theme }) => theme.radius.roundedE};
  font-weight: ${(props) => props.theme.font.weightBold};
  font-family: ${(props) => props.theme.font.familyPrimary};
  ${index.getFontSize('size14')};
  color: ${(props) => index.getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  svg {
    margin-right: ${index.getSpacing('s01')};
    fill: ${(props) => index.getColorAlias(props.disabled ? 'contentDisabled' : 'contentDefault')};
  }

  ${(props) => !props.disabled &&
    styled.css `
      &:hover {
        background: ${index.getDarkenColor('hover02', 'containerStrong')};
      }
      &:focus {
        border: 2px solid
          ${props.hasFocus ? index.getColorAlias('focusOuter') : 'transparent'};
      }
      &:active {
        background: ${index.getDarkenColor('active01', 'containerStrong')};
      }
    `};

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const SegmentLabel = styled__default['default'].div `
  display: flex;
  align-items: center;
`;

exports.SegmentLabel = SegmentLabel;
exports.SegmentWrapper = SegmentWrapper;
