@import '~./less/variables.less';
@import (multiple, reference, optional) '../../theme.config';

@type: extra;
@element: custom;

@overlayZIndex: 1;

.cms-ui {
  .aboveSearchblockOverlay {
    padding: 0.4rem;
    background: @pinkWhite;
  }
}

.aboveSearchblockOverlay {
  position: relative;
  z-index: @overlayZIndex + 1;

  .ui.tabular.menu {
    border: none;

    .item {
      border: none;
    }

    .redMenuButton {
      box-shadow: none !important;
      color: @red !important;
      font-weight: bold;
    }

    .ui.basic.button {
      border: 0px;

      &.red {
        box-shadow: none !important;
        font-weight: bold;
      }

      &:hover {
        background-color: transparent !important;
        box-shadow: none;
      }
    }
  }

  .ui.active.tab {
    min-height: 60px;
  }

  .block-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ui.basic.button.add-block-button {
    display: flex;
    align-items: center;
    gap: 0.5em;

    &:hover {
      box-shadow: none !important;
    }
  }
}

.searchlib-edit-overlay {
  position: absolute;
  z-index: @overlayZIndex;
  width: 100%;
  height: 100%;
}

body.has-block-chooser {
  .aboveSearchblockOverlay {
    z-index: unset;
  }
}