"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const DetailedListWrapper = styled.div `
  width: 100%;
`;
exports.DetailedListWrapper = DetailedListWrapper;
/**
 * @todo isColumnView is not working right now
 * this logic will be changed by using React.Context
 *
 * @note was just a typo - currently it's in by using breakpoints
 */
// flex-direction: ${props => (props.isColumnView === true ? 'column' : 'row')};
const DetailedListItemPanel = styled.dl `
  display: flex;
  flex-direction: row;

  @media (max-width: 767px) {
    flex-direction: column;
  }
`;
exports.DetailedListItemPanel = DetailedListItemPanel;
const DetailedListLabel = styled.dt `
  ${props => props.isColon === true &&
    styled.css `
      &::after {
        content: ':';
      }
    `};
`;
exports.DetailedListLabel = DetailedListLabel;
const DetailedListValue = styled.dd `
  @media (max-width: 767px) {
    margin: 10px 0;
  }
`;
exports.DetailedListValue = DetailedListValue;
//# sourceMappingURL=styled.js.map