import { BOX_SHADOW_MODAL, WHITE } from '@vincent_za/styles';

export const CN_MODAL = 'modal';
export const CLASSNAME_WRAP = 'wrap';
export const CLASSNAME_HEADER = 'header';
export const MODAL_CLASSNAME_CONTENT = 'content';
export const MODAL_CLASSNAME_TRIGGER_TEMPLATE_ACTIVE = 'trigger-template-wrap-is-active';
export const CLASSNAME_TRIGGER_TEMPLATE_ICON = 'trigger-template-icon';
export const CLASSNAME_TRIGGER_TEMPLATE_SPINNER = 'trigger-template-spinner';

export const RND_RESIZE_CLASSNAMES = {
  top: 'resize resize--top',
  topRight: 'resize-diagonal resize-diagonal--top-right',
  right: 'resize resize--right',
  bottomRight: 'resize-diagonal resize-diagonal--bottom-right',
  bottom: 'resize resize--bottom',
  bottomLeft: 'resize-diagonal resize-diagonal--bottom-left',
  left: 'resize resize--left',
  topLeft: 'resize-diagonal resize-diagonal--top-left',
};

export const RND_STYLES = `
  background-color: ${WHITE};
  box-shadow: 4px 4px 7px -5px #5c5c5e21;

  .resize {
    z-index: 2;

    &:hover {
      background: transparent;
    }

    &--top {
      top: 0 !important;
      height: 6px !important;
    }
    &--right {
      right: 0 !important;
      width: 6px !important;
    }
    &--bottom {
      bottom: 0 !important;
      height: 6px !important;
    }
    &--left {
      left: 0 !important;
      width: 6px !important;
    }
  }

  .resize-diagonal {
    z-index: 1;
    width: 0 !important;
    height: 0 !important;
    opacity: 0;

    &:hover {
      opacity: 1;
    }

    &--top-right {
      top: 0 !important;
      right: 0 !important;
      border-top: 16px solid transparent;
      border-left: 16px solid transparent;
    }
    &--bottom-right {
      bottom: 0 !important;
      right: 0 !important;
      border-bottom: 16px solid transparent;
      border-left: 16px solid transparent;
    }
    &--bottom-left {
      bottom: 0 !important;
      left: 0 !important;
      border-bottom: 16px solid transparent;
      border-right: 16px solid transparent;
    }
    &--top-left {
      top: 0 !important;
      left: 0 !important;
      border-top: 16px solid transparent;
      border-right: 16px solid transparent;
    }
  }
`;
