import { css } from '@emotion/react';
import { N0, N500 } from '@atlaskit/theme/colors';
import { wrapperDefault } from '../Extension/styles';

// Wrapper the extension title and extensionContainer
export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
  '&.with-margin-styles': {
    marginTop: 0,
    marginLeft: "var(--ds-space-negative-150, -12px)",
    marginRight: "var(--ds-space-negative-150, -12px)"
  },
  cursor: 'pointer',
  marginTop: "var(--ds-space-250, 24px)",
  marginBottom: "var(--ds-space-200, 16px)",
  '.extension-title': {
    display: 'flex',
    alignItems: 'center',
    lineHeight: '16px !important',
    marginBottom: "var(--ds-space-100, 8px)",
    marginLeft: `${"var(--ds-space-050, 4px)"} !important`,
    marginRight: "var(--ds-space-100, 8px)",
    paddingTop: `${"var(--ds-space-100, 8px)"} !important`
  },
  '&.with-border': {
    border: `1px solid ${`var(--ds-border-inverse, ${N0})`}` // adding this so macro doesn't jump when hover border is shown
  },
  '&.with-hover-border': {
    border: `1px solid ${`var(--ds-border-input, ${N500})`}`
  },
  '&.with-padding-background-styles': {
    padding: "var(--ds-space-100, 8px)",
    background: 'transparent'
  }
});
export const overlayStyles = css({
  borderRadius: "var(--ds-border-radius, 3px)",
  position: 'absolute',
  width: '100%',
  height: '100%',
  opacity: 0,
  pointerEvents: 'none',
  transition: 'opacity 0.3s',
  zIndex: 1,
  '&.with-margin': {
    margin: "var(--ds-space-negative-100, -8px)"
  }
});