/* Main backend styles */
@import "libs/mixins";

@import 'bundles/mapbendermanager/sass/manager/manager.scss';
@import 'bundles/mapbendermanager/sass/blocklist.scss';

@import "bundles/mapbendermanager/sass/element/form.scss";
@import "bundles/mapbendermanager/sass/element/layertree.scss";
@import "bundles/mapbendermanager/sass/element/map.scss";
@import "bundles/mapbendermanager/sass/element/printclient.scss";
@import "bundles/mapbendermanager/sass/element/featureInfo.scss";
@import "bundles/mapbendermanager/sass/manager/services.scss";

// ----------------------------------------------- NEW/EDIT APPLICATION
.containerBaseData{
  $height: 200px;
  $width: 200px;

  .screenshot-wrapper {
    margin-bottom: 15px;  // = .form-group
    @media (min-width: 992px) {
      margin-top: 29px; // HACK: same as line-height of first label in application base data...
      margin-bottom: 0;
    }
    .btn {
      vertical-align: top;
      margin-left: 0.5em;
    }
  }
  // screen shot holder
  .screenshot_img{
    border-radius: 15px; // match .listFilterBoxes .preview-box
    display: inline-block;

    &.default {
      background-color: #EAEAEA;  // Same background as .listFilterBoxes li .preview-box
      img {
        display: none;
      }
    }
    &:not(.default) {
      .placeholder-icon {
        display: none;
      }
    }

    .placeholder-icon {
      font-size: 60px;
    }

    div.cell_edit{
        display: table-cell;
        vertical-align:middle;
        text-align: center;
        padding: 0;
        margin:0;
        height: 200px;
        width: 200px;

        img {
         max-height: 100%;
         max-width: 100%;
         width: auto;
         height: auto;
         margin: 0 auto;
        }
      }
  }
}

/**
  Used for both elements and layersets.
 */
.application-component-table {
  thead>tr>th:first-child {
    padding-left: 0;
  }
  thead>tr>th.valign-top {
    // Undo (highly specific) bootstrap vertical-align: bottom rule
    vertical-align: top;
  }
  // Element region / Layerset titles use embedded h3 tags
  thead h3 {
    font-size: 140%;
  }
}
// To prevent horizontal collapsse in drag-and-drop transit, .layersetTable and .elementsTable both need certain
// cells to have forced expansion
.elementsTable {
  .typeColumn, .titleColumn {width: 49%;}
  .screentype-icon.disabled {
    opacity: 0.3;
  }
}

.layersetTable {
  th.titleColumn {
    width: 60%;
  }
  th.sourceColumn {
    width: 30%;
  }
  th:first-child {
      max-width: 5em;
  }
  td.sourceColumn {
    text-overflow: ellipsis;
  }
}

.static-popover-wrap {
  .popover-inner-wrap {
    display: none;
    position: absolute;
    &.display {
      display: block;
    }
    .popover {
      position: relative;
      width: 305px;
      right: 320px;
      top: -35px;
      .popover-arrow {
        top: 0px;
      }
    }
    .popover.regionConfig {
      .popover-arrow {
        transform: translate(304px, 19px);
      }
      .popover-body {
        .col-sm-2 {
          width: 41.6%;
        }
        .col-sm-10 {
          width: 58.33333333%;
        }
        .form-check {
          white-space: nowrap;
        }
      }
    }
    .popover.infoMsgBox {
      .popover-arrow {
        transform: translate(297px, 19px);
      }
      .popover-arrow::before {
        right: 0;
        border-left-color: var(--bs-popover-arrow-border);
        border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
      }
      .popover-arrow::after {
        right: var(--bs-popover-border-width);
        border-left-color: var(--bs-popover-bg);
        border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height);
      }
    }
  }
}

td.filter-matches{
    background-color: var(--bs-warning-bg-subtle);
}
