@type: 'extra';
@element: 'custom';
@itemVerticalPadding: 0.875em;
@itemHorizontalPadding: 1.25em;
@themesFolderEEA: 'eea';
@siteFolder: '../../theme';
@menu: 'pastananga';

@import (multiple) '../../theme.config';

// optionally import menu variables for itemVerticalPadding values
// loading them in a function would mean that the top variable declaration
// would win as such we use direct imports
// Site theme declaration of menu variables wins over default theme
@import (optional) '~volto-themes/default/collections/menu.variables';
@import (optional) '@{themesFolderEEA}/@{menu}/collections/menu.variables';
@import (optional) '@{siteFolder}/collections/menu.variables';

@borderColor: rgba(120, 192, 215, 0.75);
@accordionStyledWidth: auto;

// style accordion has a static width of 600px from semantic so we need to override it
.accordion-block .ui.styled.accordion {
  width: @accordionStyledWidth;
}

// Edit
body.cms-ui {
  .block-editor-accordion {
    .accordion {
      .input-accordion-title {
        width: 100%;
      }
    }
    .accordion-body {
      .ui.wrapper > * {
        width: 100% !important;
      }
    }

    .block:last-child {
      margin-bottom: 1em;
    }

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

    .block-add-button {
      display: none !important;
    }

    .block.accordion.selected::before,
    .block.accordion:hover::before {
      border-style: dashed;
    }

    .add-block-button {
      svg.circled {
        padding: 0;
        border: 1px solid currentColor;
      }
    }

    fieldset {
      border: none;

      legend {
        position: absolute;
        z-index: 3;
        top: -1.3em;
        left: 0;
        width: fit-content;
        padding: 0 1rem;
        margin-right: auto;
        margin-left: auto;
        background-color: @pageBackground;
        color: @borderColor;
        cursor: pointer;
        text-align: center;
      }
    }

    .accordion-block {
      padding-bottom: 0.1rem;
      margin: 0;

      .ui.accordion {
        .title:not(.ui) {
          position: relative;
        }
      }
    }

    .power-user-menu {
      .ui.menu {
        .accordion {
          // override padding and margin from semantic .ui.accordion .accordion
          padding: @itemVerticalPadding @itemHorizontalPadding;
          margin: 0;
        }
        // block chooser hover items don't have a bg color change, title block had a hover bg color
        .title {
          background: none;
        }
      }
    }

    .blocks-form {
      margin-top: 0.5rem;

      .block-editor-columnsBlock .columns-block .ui.segment {
        border: 1px solid #e6e7e8;

        .ui.seven.cards {
          margin-top: 0.5em;
        }
      }
    }

    .blocks-chooser {
      right: 0;
      left: auto;
      margin-top: 3rem;
    }

    .block-toolbar {
      position: absolute;
      z-index: 3;
      right: -9px;
      display: flex;
      border: 1px solid @borderColor;
      border-bottom: 1px solid @pageBackground;
      margin-top: -45px;
      background-color: @pageBackground;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;

      .ui.basic.button {
        padding: 8px 5px;
      }

      .ui.basic.button:hover {
        background: transparent !important;
      }
    }

    // with z-index: -1 you don't get the hover and focused border for block child section
    // TODO: to be removed if https://github.com/plone/volto/pull/5029 merged
    .block .block:not(.inner)::before {
      z-index: auto;
    }
  }
  .accordion-chooser {
    z-index: 100;

    .blocks-chooser {
      position: static;
    }
  }
}