@use "variables" as *;
@use "grapesjs-plugins";

#gjs {
  flex: 1 1 auto;
}


// GrapesJS color utility classes - using CSS custom properties
.#{$prefix} {
  &one {
    &-bg {
      background-color: var(--gjs-primary-color);
    }

    &-color {
      color: var(--gjs-primary-color);

      &-h:hover {
        color: var(--gjs-primary-color);
      }
    }
  }

  &two {
    &-bg {
      background-color: var(--gjs-secondary-color);
    }

    &-color {
      color: var(--gjs-secondary-color);

      &-h:hover {
        color: var(--gjs-secondary-color);
      }
    }
  }

  &three {
    &-bg {
      background-color: var(--gjs-tertiary-color);
    }

    &-color {
      color: var(--gjs-tertiary-color);

      &-h:hover {
        color: var(--gjs-tertiary-color);
      }
    }
  }

  &four {
    &-bg {
      background-color: var(--gjs-quaternary-color);
    }

    &-color {
      color: var(--gjs-quaternary-color);

      &-h:hover {
        color: var(--gjs-quaternary-color);
      }
    }
  }
}

.#{$cv-prefix}canvas,
.#{$pn-prefix}panel,
.#{$pn-prefix}commands {
  left: $projectBarWidth;
}
.#{$pn-prefix}project-bar-panel,
.#{$pn-prefix}views,
.#{$pn-prefix}options,
.#{$pn-prefix}views-container {
  left: auto;
}
.#{$cv-prefix}canvas {
  width: calc(100% - var(--viewsPanelWidth) - $projectBarWidth);
}
.#{$pn-prefix}devices-c {
  display: flex;
  .#{$prefix}device-label {
    display: none;
  }
}
.#{$pn-prefix}views-container {
}

.gjs-editor {
  font-family: $fontFamily;
  font-size: 0.75rem;
}

// Dialogs
.gjs-mdl-header {
  background-color: var(--silex-bg-main);
  color: var(--silex-text-primary);
  padding: 20px;
  border-bottom: 1px solid var(--silex-border-color-strong);

  .gjs-mdl-btn-close {
    top: 15px;
  }
}

// Inside the canvas
.gjs-toolbar {
  background-color: var(--silex-accent-primary);
}

.gjs-resizer-h {
  border-color: var(--silex-accent-primary);
}

.gjs-com-badge,
.gjs-com-badge-red,
.gjs-badge {
  background-color: var(--silex-accent-primary);
}

.gjs-cv-canvas .gjs-highlighter,
.gjs-cv-canvas .gjs-highlighter-sel {
  outline: 1px solid var(--silex-accent-primary);
}

.gjs-cv-canvas {
  height: calc(100% - var(--gjs-canvas-top) - var(--footerHeight));
}

// Property panels
.gjs-pn-buttons {
  justify-content: unset;
}

.gjs-pn-views-container, .gjs-pn-views {
  width: var(--viewsPanelWidth);
}

.gjs-pn-project-bar-container {
  width: var(--viewsProjectPanelWidth);
}

.gjs-pn-options {
  right: var(--viewsPanelWidth);
}

// Sticky CSS tags section
.top-style-section {
  position: sticky;
  top: -1px; /* Fixes a visual gap on the top */
  border-bottom: solid var(--silex-border-color-strong) 1px;
  background-color: var(--silex-bg-main);
  box-shadow: var(--silex-shadow-lg);
  z-index: 999;
}
.gjs-clm-label-sel {
  opacity: 0.5;
}
.gjs-clm-sels-info {
  padding: 7px 0;
  margin: 0;
  overflow-x: scroll;
}
.gjs-clm-sel-rule {
  word-break: break-all;
}
#gjs-clm-tags-field.gjs-field {
  margin: 0;
}
.gjs-field.gjs-field-integer {
  width: 100%;
}
.gjs-clm-tags {
  padding-top: 7px;
  padding-bottom: 0;
}
#gjs-clm-up {
  margin-top: 0;
}
.gjs-sm-icon[title]:not([title=""])::after {
  content: "?";
  margin-left: 0.5em;
  padding: 0.1em 0.3em;
  transition: background 0.5s;
  font-size: x-small;
}
.gjs-sm-icon[title]:not([title=""]):hover::after {
  background: var(--gjs-main-dark-color);
}

/*
*/
// Font awesome 5 fix
// https://github.com/GrapesJS/grapesjs/issues/644#issuecomment-833215677
.gjs-editor-cont .fa {
	font-weight: 400;
}

.fa-square-o:before {
	content: "\f0c8";
}

.fa-trash-o:before {
	content: "\f1f8";
}

.fa-map-o:before {
	content: "\f279";
}

.fa-youtube-play:before {
	content: "\f04b";
}

/* Fix: open close chevrons: FA5 has the tags in different order ?!!? */
.fa-chevron-right:before {
	content: "\f054";
}

.fa-chevron-down:before {
	content: "\f078";
}

// Font awesome 6 fix
.fa-cog:before {
  font-weight: 900;
}

.fa-paint-brush:before {
  font-weight: 900;
}

.fa-arrows-alt:before {
	content: "\f065";
  font-weight: 900;
}

.fa-caret-down:before {
  content: "\f0d7";
  font-weight: 900;
}

.fa-caret-right:before {
  content: "\f0da";
  font-weight: 900;
}

.fa-trash:before {
  content: "\f2ed";
  font-weight: 900;
}

.fa-list:before {
  content: "\f03a";
  font-weight: 900;
}

.fa-sign-out:before {
  content: "\f08b";
  font-weight: 900;
}

.fa-diamond:before {
  content: "\f3a5";
  font-weight: 900;
}

.fa-rotate-left:before {
  content: "\f2ea";
  font-weight: 900;
}

.fa-rotate-right:before {
  content: "\f2f9";
  font-weight: 900;
}

// Fix inline SVG icons in RTE toolbar (link, wrap) having no intrinsic size on WebKit
.gjs-rte-actionbar .gjs-rte-action svg,
.actionbar .action svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

// Display dots when a sector has a style
.gjs-sm-sector .gjs-sm-sector-label {
    margin-right: 0.3em
}

.fa-grip-vertical:before {
  content: "\f58e";
  font-weight: 900;
}
.gjs-sm-sector .gjs-sm-sector-title::before,
.gjs-sm-sector .gjs-sm-sector-title::after {
    content: 'o';
    display: none;
    margin-left: 0.4em;
    order: 5;
}
.gjs-sm-sector:has(.gjs-sm-label.gjs-four-color) .gjs-sm-sector-title::before {
    display: block;
    color: var(--gjs-quaternary-color);
}
.gjs-sm-sector:has(.gjs-sm-label.gjs-color-warn) .gjs-sm-sector-title::after {
    display: block;
    color: var(--gjs-color-warn);
}

// FIXME: Workaround, why is this needed?
.gjs-field .gjs-sel-arrow {
  z-index: 999;
}