$base-scrim-z-index: 50;

@mixin esri-editor__prompt($contextColor) {
  background-color: var(--calcite-ui-background);
  border-top: solid 3px $contextColor;
  color: $font-color;
  @include defaultBoxShadow();
  padding: $cap-spacing $side-spacing;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85%;

  display: flex;
  flex-flow: column nowrap;

  animation: esri-fade-in-up 250ms ease-in-out;

  .esri-editor__prompt__header {
    color: $contextColor;
    display: flex;
    margin-bottom: $cap-spacing;
    flex: 0 0 auto;

    &__heading {
      color: $heading-color;
      margin: 0 $side-spacing--quarter;
    }
  }

  .esri-editor__prompt__message {
    color: inherit;
    font-weight: $font-weight;
    word-break: break-word;
    flex: 1 1 auto;
    overflow: auto;
    overflow-x: hidden;
    padding: 0 0 $cap-spacing 0;
  }

  .esri-editor__prompt__divider {
    color: inherit;
    margin: 0 0 $cap-spacing 0;
    border-bottom: $border;
    border-color: $border-color--subtle;
    flex: 0 0 auto;
  }

  .esri-editor__prompt__actions {
    display: flex;
    flex-direction: row;
  }
}

@mixin editor() {
  $headerOrFooterHeight: 56px;
  $border: 1px solid $border-color;
  $panel-background-color: var(--calcite-ui-background);

  .esri-editor {
    background-color: $panel-background-color;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .esri-editor__header {
    background-color: $background-color;
    padding: 0 $side-spacing--three-quarters;
    font-size: $font-size__header-text;
    border-bottom: $border;
    display: flex;
    align-items: center;
    height: $headerOrFooterHeight;
  }

  .esri-editor__title {
    text-align: center;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .esri-editor__content {
    justify-content: center;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 20vh;
    display: flex;
    flex-direction: row;

    animation: esri-fade-in 250ms ease-in-out;
    transition: min-height 250ms ease-in-out;
    &:empty {
      min-height: 0;
    }
  }

  .esri-editor__content-group {
    display: flex;
    flex-direction: column;
    flex: 1 0 100%;
  }

  .esri-editor__message {
    display: flex;
    align-items: center;
    align-self: stretch;
    font-size: $font-size__h2;
    margin-left: $side-spacing;
    margin-right: $side-spacing;
  }

  .esri-editor__scroller {
    overflow-y: auto;
    padding-top: $cap-spacing--half;
    padding-bottom: $cap-spacing;
  }

  .esri-editor .esri-feature-form {
    width: 100%;
    padding: 0;
  }

  .esri-editor {
    .esri-item-list {
      background-color: transparent;
    }

    .esri-item-list__group {
      margin-left: 0;
      margin-right: 0;
    }
  }

  .esri-editor__temp-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .esri-editor__back-button {
    display: flex;
    width: $button-width;
    height: $button-height;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    background-color: $background-color--offset-subtle;
    transition: background-color 125ms ease-in-out;
    &:hover {
      background-color: $background-color--hover;
      color: $interactive-font-color--hover;
    }
  }

  .esri-editor__controls {
    background-color: $background-color;
    border-top: $border;
    padding: $cap-spacing $side-spacing;
    display: flex;
    flex-direction: column;
  }

  .esri-editor__control-button {
    margin-bottom: 6px;
    min-height: $button-height;
  }

  .esri-editor__feature-list-item {
    @include cardBoxShadow();
    padding: $cap-spacing $side-spacing--quarter;
    background-color: $background-color;
    cursor: pointer;
    margin: $cap-spacing--quarter 0;
    border: $border;
    border-color: transparent;
    border-radius: $border-radius;

    display: flex;
    justify-content: space-between;

    transition: border-color 125ms ease-in-out;
  }
  .esri-editor__feature-list-item:hover,
  .esri-editor__feature-list-item:focus {
    border-color: $border-color--hover;
  }
  .esri-editor__feature-list-item:active {
    background-color: $background-color--active;
    color: $interactive-font-color;
  }

  .esri-editor__feature-list-item {
    @include icomoonIconSelector("&") {
      padding-right: $font-size * 0.2;
    }
  }

  .esri-editor__feature-list-item--disabled {
    pointer-events: none;
    opacity: $opacity--disabled;
  }

  .esri-editor__feature-list-icon {
    flex: 0 0 auto;
    padding: 0 $side-spacing--half;
  }

  .esri-editor__feature-list-index {
    text-align: right;
    flex-basis: 2ch;
  }

  .esri-editor__feature-list-name {
    flex: 1 1 auto;
    margin: 0 $side-spacing--half;
  }

  .esri-editor__feature-list {
    width: 100%;
    margin: 0;
    padding: $cap-spacing--quarter $side-spacing--quarter;
    list-style: none;
  }

  .esri-editor__prompt--info {
    @include esri-editor__prompt(var(--calcite-ui-info));
  }

  .esri-editor__prompt--warning {
    @include esri-editor__prompt(var(--calcite-ui-warning));
  }

  .esri-editor__prompt--danger {
    @include esri-editor__prompt(var(--calcite-ui-danger));
  }

  .esri-editor__prompt-option {
    margin: $cap-spacing--half 0;
    cursor: pointer;
    flex: 0 0 auto;
  }

  // .esri-editor__prompt-option--positive {
  //   color: $button-color;
  // }

  // .esri-editor__prompt-option--negative {
  //   color: $font-color--error;
  // }

  .esri-editor__overlay {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: $background-color--overlay;
  }

  .esri-editor__progress-bar {
    position: absolute;
    width: 100%;
  }

  .esri-editor__mode-selection {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .esri-ui {
    .esri-editor .esri-item-list__scroller {
      max-height: ($panel-max-height--medium * 0.5) - 80px;
    }
  }

  .esri-editor__panel-toolbar {
    --divider-border: 1px solid var(--calcite-ui-border-2);

    background-color: var(--calcite-ui-foreground-1);
    display: flex;
    flex-direction: row;
    border-bottom: var(--divider-border);

    &__snapping-button {
      flex-grow: 1;
    }
  }

  .esri-editor__panel-content {
    position: relative;
    padding: 0 12px 12px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;

    &--section {
      margin-top: 15px;
    }
  }

  .esri-editor__scrim-overlay {
    position: relative;
    z-index: $base-scrim-z-index + 1;
  }

  .esri-editor__update-features-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
  }

  .esri-editor__update-features-action-buttons--button {
    flex-grow: 1;
  }

  .esri-editor__feature-templates-container {
    .esri-feature-templates {
      width: 100%;
    }
  }

  .esri-editor__snapping-controls-popover {
    width: $panel-width * 0.9;
    display: flex;
    flex-direction: column;
  }

  @include loopingProgressBar(".esri-editor__progress-bar");
}

@if $include_Editor == true {
  @include editor();
}