@import 'cms-ui/cms-ui_container';
@import 'cms-ui/sidebar';
@import 'cms-ui/subblocks-edit';
@import 'cms-ui/controlpanel';
@import 'io-sanita/mixins';

body.cms-ui {
  color: $body-color;
  font-weight: $font-weight-base;

  .block {
    font-family: $font-family-sans-serif;

    %heading {
      margin-top: 0;
      /* 1*/
      margin-bottom: $headings-margin-bottom;
      color: $headings-color;
      font-family: $font-family-sans-serif;
      font-weight: $headings-font-weight;
      line-height: $headings-line-height;
    }

    h1 {
      @extend %heading;
      @include font-size($h1-font-size);
      font-weight: 700 !important;

      @include media-breakpoint-up(sm) {
        font-size: 3rem;
        line-height: 3.5rem;
      }
    }

    h2 {
      @extend %heading;
      @include font-size($h2-font-size);

      &:not(.h3):not(.h4):not(.h5):not(.h6) {
        font-weight: 700 !important;
      }

      @include media-breakpoint-up(sm) {
        font-size: 2.5rem;
        line-height: 3rem;
      }
    }

    h3 {
      @extend %heading;
      @include font-size($h3-font-size);
      font-weight: 700 !important;

      @include media-breakpoint-up(sm) {
        font-size: 2rem;
        line-height: 2.5rem;
      }
    }

    h4 {
      @extend %heading;
      @include font-size($h4-font-size);
      font-weight: 600;

      @include media-breakpoint-up(sm) {
        font-size: 1.75rem;
        line-height: 2rem;
      }
    }

    h5 {
      @extend %heading;
      @include font-size($h5-font-size);
      font-weight: 600;

      @include media-breakpoint-up(sm) {
        font-size: 1.5rem;
        line-height: 2rem;
      }
    }

    h6 {
      @extend %heading;
      @include font-size($h6-font-size);
      font-weight: 600;

      @include media-breakpoint-up(sm) {
        font-size: 1.125rem;
      }
    }

    .block:not(.inner)::before {
      top: -0.3rem;
      height: calc(100% + 0.6rem);
    }

    @import 'bootstrap-italia/src/scss/custom/type'; //to apply styles for headers on different screen sizes

    &,
    p,
    ul,
    ol,
    dl {
      font-size: 16px;
      line-height: 1.5;

      @include media-breakpoint-up(sm) {
        font-size: 18px;
        line-height: 1.555;
      }
    }

    //align
    .text-center {
      text-align: center;
    }

    .text-end {
      text-align: right;
    }

    .text-justify {
      text-align: justify;
    }

    .block.text {
      line-height: 1.555;
    }
  }

  a {
    color: $link-color;
    text-decoration: $link-decoration;

    &:hover {
      color: $link-hover-color;
      text-decoration: $link-decoration;
    }
  }

  &.contenttype-document,
  &.contenttype-cartellamodulistica {
    &:not(.section-add) {
      .block {
        font-family: $font-family-sans-serif;
        font-weight: 300;
        line-height: 1.555;
      }
    }
  }

  .it-header-wrapper,
  .public-ui {
    font-size: 18px;
    font-weight: 300;

    * {
      font-family: 'Titillium Web';
    }

    h3 {
      margin-top: 0;
    }
  }

  .public-ui:not(:has(.it-header-wrapper)) {
    a:not(.btn):not(.card a):not(.read-more) {
      color: $link-color;
    }
  }

  &:not(.section-search):not(.section-sitemap):not(.section-argomento) {
    .it-footer {
      display: none;
    }
  }

  a .icon.external-link {
    height: 1rem;
    margin-left: 0.1rem;
  }

  //vertical buttons move
  .ui.vertical.buttons {
    .button.icon {
      min-width: 2.5rem;
    }
  }

  //fix drag block button and delete block button colors
  &.has-toolbar.has-sidebar .drag.handle.wrapper,
  .drag.handle.wrapper,
  .block .ui.basic.button.delete-button,
  .block.cta_block .ui.basic.button.delete-button,
  .block.numbersBlock > .ui.basic.button.delete-button {
    min-height: unset;
    padding: 5px !important;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    margin-top: -5px;
    margin-right: -40px !important;
    background-color: #fff !important;
    color: #575757 !important;
    line-height: 0;

    svg,
    svg:not(:hover) {
      fill: currentColor !important;
      line-height: 0;
    }

    .icon {
      background: none;
    }

    &:hover,
    &:focus,
    &:focus-within {
      background-color: black !important;
      color: #fff !important;

      svg {
        fill: #fff !important;
      }
    }
  }

  &.has-toolbar.has-sidebar .drag.handle.wrapper,
  .drag.handle.wrapper {
    margin-left: -40px !important;

    &:hover {
      background-color: #4e8aa5 !important;
    }
  }

  // @media only screen and (min-width: 1655px) {
  //   &.has-toolbar.has-sidebar .drag.handle.wrapper {
  //     margin-left: -40px !important;
  //   }
  // }

  //fix delete block button colors

  .block .ui.basic.button.delete-button,
  .block.cta_block .ui.basic.button.delete-button,
  .block.numbersBlock > .ui.basic.button.delete-button,
  .block.contacts .ui.basic.button.delete-button {
    margin-right: -39px !important;

    &:hover,
    &:focus,
    &:focus-within {
      background-color: #d90062 !important;
    }
  }

  /*Select*/
  .react-select__menu {
    z-index: 11;

    /* FIX CT SELECT REACTVIRTUALIZED */
    .ReactVirtualized__Grid.ReactVirtualized__List {
      width: 100% !important;

      .ReactVirtualized__Grid__innerScrollContainer {
        max-width: none !important;
      }
    }
  }

  .react-select__option .icon-container .icon {
    width: auto;
    height: 1rem;
  }

  //slate
  .editor-link {
    &.input-anchorlink-theme {
      input {
        padding: 0 0.3rem;
        font-size: 0.8rem;
      }
    }
  }

  /*Date picker*/
  .SingleDatePicker {
    z-index: unset;

    .DateInput {
      z-index: 0;
    }

    .SingleDatePicker_picker {
      z-index: 10;
    }
  }

  /*Controlpanels*/
  .menu-configuration-widget,
  .footer-configuration-widget,
  .secondary-menu-configuration-widget,
  .search-sections-configuration-widget {
    .ui.pointing.secondary.menu {
      flex-wrap: wrap;
    }
  }

  .menu-configuration-widget {
    .menu-blocks-container {
      .DraftEditor-editorContainer .public-DraftEditor-content {
        min-height: 19px;
      }
    }
  }

  .footer-configuration-widget {
    .DraftEditor-editorContainer {
      a.link-anchorlink-theme {
        color: #06c;

        &:hover {
          color: darken(#06c, 20);
        }
      }
    }
  }

  &.section-controlpanel {
    .ui .grid h3 .content {
      font-size: 1rem;
    }

    a {
      text-decoration: none;

      &:hover {
        text-decoration: none;
      }
    }

    .menu-configuration-widget {
      .menu-item-field-additionalClasses {
        display: none;
      }
    }
  }

  /*Sidebar and widgets*/
  .sidebar-container .object-listing,
  .icon-align-name {
    svg.icon {
      width: 20px !important;
      height: 20px !important;
      color: #999 !important;
      fill: #999 !important;
    }
  }

  .sidebar-container {
    .numbers-block-sidebar-form-container {
      padding-bottom: 1rem;
    }

    .breadcrumbs {
      .breadcrumb {
        flex-wrap: wrap;
        row-gap: 0.5em;

        a.section {
          position: relative;
          overflow: hidden;
          text-overflow: ellipsis; //fix per breadcrumb troppo lunghi

          &:not(:last-of-type) {
            max-width: 33.33%;
          }

          &:last-of-type {
            max-width: 100%;

            .tooltip {
              text-overflow: unset;
              white-space: normal;
            }
          }
        }

        .tooltip {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:hover + .tooltip-text {
            opacity: 1;
            visibility: visible;
          }

          &:last-child {
            max-width: none;
            text-overflow: unset;
            white-space: normal;
          }
        }

        .tooltip-text {
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          width: 8rem;
          padding: 5px;
          border-radius: 0.2em;
          margin-left: -60px;
          background-color: $gray-200;
          color: $black;
          font-size: 0.8em;
          opacity: 0;
          text-align: center;
          transition: opacity 0.3s;
          visibility: hidden;

          &::after {
            position: absolute;
            top: 100%;
            left: 50%;
            border-width: 5px;
            border-style: solid;
            border-color: $gray-200 transparent transparent transparent;
            margin-left: -5px;
            content: '';
          }
        }
      }
    }
  }

  .icon-align-name {
    svg.icon {
      margin-right: 0.75rem !important;
    }
  }

  .color-picker-widget {
    .button {
      padding: 1rem;
      border: 1px solid $gray-border;

      &.active {
        border: 2px solid #e40167;
      }
    }

    .button.transparent,
    .button.transparent.active {
      background-color: transparent;
    }

    .button.primary,
    .button.primary.active {
      background-color: $primary;
    }

    .button.secondary,
    .button.secondary.active {
      background-color: $secondary;
    }

    // Alert block
    // .button.info,
    // .button.info.active {
    //   background-color: $alert-info;
    // }

    // .button.warning,
    // .button.warning.active {
    //   background-color: $alert-warning;
    // }

    // .button.danger,
    // .button.danger.active {
    //   background-color: $alert-danger;
    // }

    //bs-colors
    .button.primary,
    .button.callout_note {
      &,
      &.active {
        background-color: var(--bs-primary);
      }
    }

    .button.info {
      &,
      &.active {
        background-color: var(--bs-info);
      }
    }

    .button.success {
      &,
      &.active {
        background-color: var(--bs-success);
      }
    }

    .button.warning {
      &,
      &.active {
        background-color: var(--bs-warning);
      }
    }

    .button.danger {
      &,
      &.active {
        background-color: var(--bs-danger);
      }
    }
  }

  .path-filter-widget {
    padding: 1em 0 1em 0.5em;
    border-left: 1px solid #edf1f2;
    margin-left: 2em;

    .filter-title {
      padding: 0.5em;
      margin-left: -0.5em;
      background-color: #edf1f2;
    }
  }

  [data-rbd-draggable-context-id] {
    margin-bottom: 1rem;
  }

  /*Blocchi*/
  .block-editor-image {
    &.right,
    &.left {
      .ui.drag.block.image {
        z-index: 99;
        max-width: 50%;
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;

        .block.image,
        .block.image img {
          margin-bottom: 0;
        }
      }

      &:has(img.small) {
        .ui.drag.block.image {
          max-width: 15%;
        }
      }

      &:has(img.medium) {
        .ui.drag.block.image {
          max-width: 25%;
        }
      }

      &:has(img.large) {
        .ui.drag.block.image {
          max-width: 50%;
        }
      }
    }

    /* Image right */
    &.right {
      .block.image {
        float: right;
      }

      .ui.drag.block.image {
        margin-left: 1rem;
      }

      .drag.handle.wrapper {
        left: 50%;
      }

      &:has(img.medium) {
        .drag.handle.wrapper {
          left: 75%;
        }
      }

      &:has(img.small) {
        .drag.handle.wrapper {
          left: 85%;
        }
      }
    }

    /* Image left */
    &.left {
      .block.image {
        float: left;
      }

      .ui.drag.block.image {
        margin-right: 1.7rem;
      }
    }
  }

  .block-editor-listing {
    //blocchi listing con sfondo, in edit non vede gli stili di pb-4 ecc perchè sono sotto cms-ui
    &.pb-4 {
      .block.listing {
        padding-bottom: 0.2rem !important; //per simulare il pb-4
      }
    }

    &.full-width {
      .drag.handle.wrapper {
        left: 20%;

        @media (max-width: #{map-get($grid-breakpoints, sm)}) {
          left: 10%;
        }
      }

      .ui.delete-button {
        right: 20%;

        @media (max-width: #{map-get($grid-breakpoints, sm)}) {
          right: 10%;
        }
      }
    }
  }

  .simple-text-editor-widget {
    .simple-text-input {
      display: inline-block;
      min-width: 1px;

      &:empty:before {
        display: block;
        /* For Firefox */
        content: attr(placeholder);
        font-weight: inherit;
        opacity: 0.333;
        pointer-events: none;
      }
    }
  }

  .block-editor-title,
  .block-editor-description {
    & + [class^='block-editor'] {
      margin-top: 2.8rem;
    }
  }

  .block-editor-title + .block-editor-description {
    margin-top: 0;
  }

  .block-editor-description {
    &,
    .documentDescription {
      color: $body-color;
      font-family: $font-family-sans-serif;
      font-size: 1rem;
      font-weight: 400;
    }
  }

  /*Block chooser*/
  [data-popper-placement] {
    z-index: 1000;
  }

  /*Modals*/
  .ui.page.modals.dimmer {
    .ui.modal {
      .content {
        max-height: 80vh;
        overflow-y: scroll;
      }

      .occurences {
        .content {
          max-height: unset;
          overflow-y: unset;
        }
      }
    }
  }

  /*Folder contents*/
  .folder-contents {
    .title-link {
      .icon.icon-margin {
        width: 20px !important;
      }

      .future,
      .expired {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        margin-left: 0.5em;
        font-size: 0.8em;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
      }

      .future {
        background-color: #0066cc;
        color: white;
      }

      .expired {
        background-color: rgb(228, 1, 102);
        color: white;
      }
    }
  }

  #page-contents.ui.container.folder-contents {
    @media (min-width: 992px) {
      width: 90% !important;
    }

    table.ui.single.line tbody {
      white-space: normal;
      word-break: break-word;
    }
  }

  /*History*/
  &.view-diffview,
  &.section-historyview {
    .ui.table,
    #toolbar .ui.table {
      width: 100%;
      table-layout: fixed;
    }
  }

  &.view-diffview {
    @import 'bootstrap/scss/card';
    @import 'bootstrap-italia/src/scss/custom/card';
    @import './bootstrap-italia/custom/card';
  }

  /*Widgets*/

  .column.color-chooser {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .upload-row {
    img.ui.image {
      max-width: 100%;
      height: auto;
      max-height: 60px;
    }
  }

  .inline.field:not(.helper) {
    .blocks-widget-container {
      padding-top: 1em;
    }
  }

  .objectbrowser-field {
    .selected-values {
      .ui.label {
        position: relative;
        padding-right: 2em;

        .icon.right {
          position: absolute;
          top: 50%;
          right: 0.5em;
          margin: 0;
          transform: translateY(-50%);
        }
      }
    }
  }

  .recurrence-form {
    .byday-field {
      .ui.button {
        padding: 0px;
      }
    }

    .byyear-field {
      .byyear-byday {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }
  }

  //search weekday fix
  .DayPicker {
    .DayPicker_weekHeader {
      .DayPicker_weekHeader_ul {
        padding-left: 0;
      }
    }
  }

  /*Colors widget*/
  .color-picker-widget {
    .ui.circular.button {
      width: 2em;
      height: 2em;
      padding: 1em;
      border-radius: 100%;

      &.bg-none {
        background-image: repeating-conic-gradient(
          #f5f2fa 0 25%,
          transparent 0 50%
        );
        background-position: 50%;
        background-size: 12px 12px;
      }
    }
  }

  /* Edit form CT */
  #page-edit,
  #page-add {
    .ui.form.vertical-form fieldset {
      .ui.grid {
        margin-top: 0;

        .ui.attached.tabular.menu {
          max-width: 100%;
          height: 100%;
          margin-top: -1rem;
        }
      }
    }
  }

  /* Dropdown menu blocks */
  .blocks-chooser .ui.accordion .title ~ .content {
    display: contents;
  }

  .blocks-widget
    .blocks-widget-container
    .block-editor-slateTable
    .slateTable
    .toolbar {
    top: -50px;
  }
}

/*Has toolbar*/
body.has-toolbar {
  #toolbar {
    .toolbar-content.show {
      z-index: 501;
    }

    .personal-tools {
      .avatar {
        width: 220px;
        margin: 1rem auto;
      }
    }
  }

  &.public-ui #toolbar {
    .toolbar {
      &:before {
        content: none;
      }
    }

    .toolbar-content.show {
      max-height: 100vh;
      overflow-y: scroll !important;
    }
  }
}

/*Multilingual*/
#page-add-translation {
  .block {
    .ui.container {
      width: 100% !important;
    }

    .row.row-full-width {
      max-width: 100%;
      margin: 0;
    }
  }
}