/**
 * Fullscreen Modal Styles
 */

@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

// Fullscreen modal positioning and styling
.ant-modal.ant-modal-centered.html-editor-fullscreen-modal,
.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal,
div.ant-modal.html-editor-fullscreen-modal,
body .ant-modal-mask+.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal {
  top: 0.625rem;
  max-width: inherit;
}

.ant-modal.html-editor-fullscreen-modal .ant-modal-content .ant-modal-body,
.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal .ant-modal-content .ant-modal-body,
div.ant-modal.html-editor-fullscreen-modal div.ant-modal-content div.ant-modal-body,
body .ant-modal-mask+.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal .ant-modal-content .ant-modal-body {
  padding: 0;
}

// Fullscreen header styling - consolidated selectors
.html-editor-fullscreen .html-editor__header--fullscreen,
.html-editor.html-editor-fullscreen .html-editor__header--fullscreen,
.html-editor__header--fullscreen,
.html-editor__header.html-editor__header--fullscreen,
.ant-modal .html-editor__header--fullscreen,
.ant-modal-content .html-editor__header--fullscreen {
  display: flex;
  align-items: center;
  background-color: $CAP_G10;
  border-bottom: 0.0625rem solid $CAP_G08;
  padding-right: 1rem;
  position: relative;
  z-index: 1070;

  .device-toggle,
  .device-toggle.device-toggle {
    flex: 1;
  }

  .editor-toolbar,
  .editor-toolbar.editor-toolbar,
  .ant-layout-header.editor-toolbar {
    background-color: transparent;
    border-bottom: none;
    border: none;
    padding: 0;
    min-height: 3.25rem;
    height: 3.25rem;
    position: relative;

    &__right {
      margin-left: auto;
    }
  }
}

// Library mode overrides for INAPP variant - Position absolute for toolbar
// These selectors match the high-specificity patterns above but include library-mode class
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar.editor-toolbar,
.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .ant-layout-header.editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar {
  position: absolute;
}