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

// Wrapper the extension title and extensionContainer
export var 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)".concat(" !important"),
    marginRight: "var(--ds-space-100, 8px)",
    paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
  },
  '&.with-border': {
    border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
  },
  '&.with-hover-border': {
    border: "1px solid ".concat("var(--ds-border-input, ".concat(N500, ")"))
  },
  '&.with-padding-background-styles': {
    padding: "var(--ds-space-100, 8px)",
    background: 'transparent'
  }
});
export var 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)"
  }
});