@use "shared";

$eic-ink: #1d2327;
$eic-muted: #646970;
$eic-line: #dcdcde;
$eic-soft-line: #f0f0f1;
$eic-surface: #fff;
$eic-panel: #f6f7f7;
$eic-primary: #2271b1;
$eic-primary-hover: #135e96;
$eic-danger: #b32d2e;

@mixin eic-settings-sidebar {
  flex: 0 0 300px;
  max-width: 300px;
  margin: 0;
  padding: 16px;
  border: 1px solid $eic-line;
  border-radius: 6px;
  background: $eic-panel;

  .eic-settings-group {
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid $eic-line;

    &.eic-settings-group-last {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
  }

  .eic-setting-row {
    margin-top: 12px;
    clear: both;
  }

  .eic-setting-row > label,
  .eic-setting-label {
    color: $eic-ink;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }

  .eic-setting-row-name {
    label {
      display: block;
      margin-bottom: 5px;
    }

    input {
      width: 100%;
      min-height: 34px;
      margin: 0;
    }
  }

  select,
  input[type="number"] {
    width: 100%;
    max-width: 100%;
    min-height: 34px;
  }

  input[type="color"] {
    width: 52px;
    height: 32px;
    padding: 0;
  }

  .eic-setting-row-color {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .eic-text-frames-row-compact {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 96px;
    align-items: center;
    gap: 12px;
  }

  .eic-setting-row-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
      display: flex;
      align-items: center;
      color: $eic-ink;
      font-size: 13px;
      font-weight: 400;
    }

    input {
      margin: 0 8px 0 0;
    }
  }

  .wp-picker-container {
    display: inline-block;
    margin: 0;
    line-height: 30px;
  }

  .wp-picker-input-wrap {
    position: absolute;
  }

  .wp-picker-holder {
    z-index: 30;
    position: absolute;
  }
}

.eic-modal {
  display: none;
  color: $eic-ink;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  .eic-modal-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    margin: 0;
    padding: 0 88px 0 24px;
    border-bottom: 1px solid $eic-line;
    background: rgba(255, 255, 255, 0.96);
  }

  .eic-modal-body {
    width: 100%;
    padding: 18px 24px 24px;
  }

  .eic-modal-title {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: $eic-ink;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;

    i {
      margin-right: 7px;
      color: $eic-muted;
      font-size: 16px;
      line-height: 1;
    }

    &.eic-modal-title-right {
      margin-left: auto;
      float: none;

      i {
        margin-right: 0;
        margin-left: 7px;
      }
    }
  }

  .eic-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid $eic-line;
    border-radius: 4px;
    background: $eic-surface;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;

    &:hover,
    &:focus {
      border-color: $eic-primary;
      color: $eic-primary;
      outline: none;
      box-shadow: 0 0 0 1px $eic-primary;
    }
  }

  .eic-modal-action-primary {
    border-color: $eic-primary;
    background: $eic-primary;
    color: #fff;

    i {
      color: inherit;
    }

    &:hover,
    &:focus {
      border-color: $eic-primary-hover;
      background: $eic-primary-hover;
      color: #fff;
      box-shadow: 0 0 0 1px $eic-primary-hover;
    }
  }

  .eic-modal-action-busy {
    cursor: wait;
    opacity: 0.86;

    &:hover,
    &:focus {
      cursor: wait;
    }
  }
}

.eic-lightbox {
  z-index: 100000; // WP Admin bar is 99999
  background: rgba(29, 35, 39, 0.72); // Keep the media modal visually separated.

  .eic-lightbox-content {
    width: calc(100vw - 48px);
    height: calc(100vh - 72px);
    max-width: 1240px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  }

  .eic-lightbox-inner {
    height: 100%;
  }

  .eic-modal {
    display: block;
    min-height: 100%;
  }
}

.eic-layouts {
  .eic-layout-picker {
    .eic-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: -8px;
      text-align: center;
    }
  }

  .eic-frame {
    display: inline-block;
    width: 116px;
    height: 116px;
    margin: 8px;
    border: 1px solid $eic-line;
    border-radius: 0;
    background: $eic-panel;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;

    .eic-image {
      border: 1px solid #747474;
      background-color: #fff;
    }

    .eic-image-size,
    .eic-image-controls {
      display: none;
    }

    &.eic-frame-custom {
      background: #f0f6fc;
      border-style: dashed;

      span {
        position: absolute;
        left: 10px;
        right: 10px;
        text-align: center;

        &:nth-child(1) {
          top: 26px;
          color: $eic-ink;
          font-weight: 700;
          line-height: 1.2;
        }

        &:nth-child(2) {
          bottom: 14px;
          color: $eic-primary;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }

    &:hover,
    &:focus {
      border-color: $eic-primary;
      box-shadow: 0 0 0 2px $eic-primary, 0 8px 20px rgba(34, 113, 177, 0.16);
      cursor: pointer;
      transform: translateY(-1px);
    }
  }

  .eic-custom-layouts {
    display: none;
  }
}

.eic-editing,
.eic-creating {
  .eic-image:hover {
    .eic-image-controls {
      display: flex;
    }
  }

  .eic-image-controls {
    .eic-image-control[data-eic-tooltip] {
      position: relative;
      overflow: visible;

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 6px);
        transition: opacity 120ms ease, transform 120ms ease;
      }

      &::before {
        content: "";
        top: calc(100% + 2px);
        border: 5px solid transparent;
        border-bottom-color: $eic-ink;
      }

      &::after {
        content: attr(data-eic-tooltip);
        top: calc(100% + 11px);
        width: max-content;
        max-width: 180px;
        padding: 5px 8px;
        border-radius: 4px;
        background: $eic-ink;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
      }

      &:hover,
      &:focus {
        &::before,
        &::after {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }
    }
  }
}

.eic-container {
  .eic-frame {
    .eic-image {
      overflow: hidden;
    }

    .eic-image-caption {
      position: absolute;
      z-index: 2;
      padding: 5px;
      line-height: 1.3;
      pointer-events: none;

      &.eic-image-caption-hover {
        display: none;
      }
    }
  }
}

.eic-editing,
.eic-creating {
  .eic-frame {
    .eic-image {
      overflow: visible;

      &:hover,
      &:focus-within {
        z-index: 20;
      }
    }
  }

  .eic-image:hover {
    .eic-image-caption-hover {
      display: block;
    }
  }
}

.eic-editing {
  .eic-editing-workspace {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .eic-properties {
    @include eic-settings-sidebar;

    .eic-setting-row-slider {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr) minmax(58px, auto);
      align-items: center;
      column-gap: 10px;
      row-gap: 6px;
    }

    .slider-value-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      min-height: 26px;
      padding: 3px 8px;
      border-radius: 4px;
      background: #fff;
      color: $eic-muted;
      font-size: 12px;
      font-weight: 600;
      vertical-align: top;
    }

    .eic-adjustable-value {
      position: relative;
      border: 1px solid $eic-line;
      cursor: pointer;

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -6px);
        transition: opacity 120ms ease, transform 120ms ease;
      }

      &::before {
        content: "";
        top: -7px;
        border: 5px solid transparent;
        border-top-color: #1d2327;
      }

      &::after {
        content: attr(data-eic-tooltip);
        bottom: calc(100% + 6px);
        width: max-content;
        max-width: 180px;
        padding: 5px 8px;
        border-radius: 4px;
        background: #1d2327;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
      }

      &:hover,
      &:focus {
        border-color: $eic-primary;
        color: $eic-primary;
        outline: none;
        box-shadow: 0 0 0 1px $eic-primary;

        &::before,
        &::after {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }
    }

    #grid-width-slider,
    #grid-ratio-slider,
    #border-width-slider,
    #border-radius-slider {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    #grid-align {
      width: 100%;
      max-width: 100%;
      min-height: 34px;
      margin: 0;
    }

    #image-size {
      margin-left: 0;
    }

    .eic-settings-group + .eic-premium-only {
      margin: 14px 0 0;
      max-width: none;
    }

  }

  .eic-editing-canvas {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 20px;
    border: 1px solid $eic-line;
    border-radius: 6px;
    background:
      linear-gradient(45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(-45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, $eic-soft-line 75%),
      linear-gradient(-45deg, transparent 75%, $eic-soft-line 75%);
    background-color: #fff;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;

    .eic-container {
      width: 100%;
      min-width: max-content;
      margin: 0;
      text-align: center;

      &.eic-align-left {
        text-align: left;
      }

      &.eic-align-center {
        text-align: center;
      }

      &.eic-align-right {
        text-align: right;
      }

      &.eic-float-left {
        float: left;
        width: auto;
        margin-right: 10px;
      }

      &.eic-float-right {
        float: right;
        width: auto;
        margin-left: 10px;
      }
    }
  }

  .eic-frame {
    width: 500px;
    height: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    .eic-image {
      &:not(.has-image):not(.has-text-frame) {
        background: transparent !important;

        .eic-image-control-manipulate,
        .eic-image-control-link,
        .eic-image-control-caption,
        .eic-image-control-remove {
          display: none;
        }
      }

      &.has-text-frame {
        cursor: default;

        .eic-image-controls {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          z-index: 4;
        }

        .eic-image-control-image,
        .eic-image-control-manipulate,
        .eic-image-control-link,
        .eic-image-control-caption {
          display: none;
        }
      }

      &.has-image {
        cursor: move;

        .eic-image-control-text-frame {
          display: none;
        }
      }
    }

    .eic-divider {
      display: none;
      position: absolute;
      z-index: 10;
      background-color: #333;
      border: 1px solid #fff;
    }

    .eic-image-size {
      display: none;
    }

    .eic-image-controls {
      display: none;
      position: relative;
      z-index: 3;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 8px;

      .eic-image-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        width: 34px;
        margin: 4px;
        border-radius: 4px;
        background-color: rgba(34, 113, 177, 0.95);
        color: #fff;
        text-align: center;
        line-height: 34px;
        font-size: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

        &:hover {
          background-color: $eic-primary-hover;
          cursor: pointer;
        }
      }

      .eic-image-control-split-rows,
      .eic-image-control-split-cols {
        display: none;
      }
    }
  }

  .eic-premium-only {
    display: none;
  }
}

.eic-text-frames-workspace {
  display: flex;
  align-items: flex-start;
  gap: 24px;

  .eic-text-frames-editor {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
  }

  .eic-text-frames-preview {
    flex: 1 1 auto;
    width: 100%;
    min-height: 240px;
    margin: 16px 0 0;
    overflow: auto;
    padding: 20px;
    border: 1px solid $eic-line;
    border-radius: 6px;
    background:
      linear-gradient(45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(-45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, $eic-soft-line 75%),
      linear-gradient(-45deg, transparent 75%, $eic-soft-line 75%);
    background-color: #fff;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
  }

  .eic-text-frames-preview-scale {
    width: max-content;
    transform-origin: top left;

    .eic-container {
      margin: 0;
    }
  }

  .eic-text-frames-preview-frame {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }

  .eic-image:not(.has-image):not(.has-text-frame) {
    background: transparent !important;
  }

  .eic-text-frames-properties {
    @include eic-settings-sidebar;

    .eic-text-frames-remove-group {
      padding-top: 16px;
      margin-top: 16px;
      border-top: 1px solid $eic-line;
    }

    .eic-text-frame-remove {
      width: 100%;
      text-align: center;
    }
  }

  .eic-text-frames-row-inline {
    display: flex;
    gap: 12px;
    margin-top: 12px;

    label {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
    }

    input {
      margin: 0 6px 0 0;
    }
  }
}

.eic-text-frame-content {
  overflow: hidden;
  overflow-wrap: anywhere;

  p,
  li,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
}

.eic-property-header {
  display: block;
  color: $eic-ink;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.eic-creating {
  .eic-custom-layout-workspace {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  .eic-custom-layout-properties {
    @include eic-settings-sidebar;

    .eic-custom-layout-history-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 34px;
      font-weight: 600;

      i {
        margin-right: 6px;
      }
    }

    .eic-custom-layout-history-panel {
      max-height: 360px;
      margin-top: 12px;
      overflow-y: auto;
    }

    .eic-custom-layout-history-empty {
      padding: 10px;
      border: 1px dashed $eic-line;
      border-radius: 4px;
      background: #fff;
      color: $eic-muted;
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
    }

    .eic-custom-layout-history-section {
      margin-top: 14px;

      &:first-child {
        margin-top: 0;
      }
    }

    .eic-custom-layout-history-heading {
      display: block;
      margin-bottom: 7px;
      color: $eic-ink;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }

    .eic-custom-layout-history-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .eic-custom-layout-history-item {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px;
      border: 1px solid $eic-line;
      border-radius: 4px;
      background: #fff;
      color: $eic-ink;
      cursor: pointer;

      &:hover,
      &:focus {
        border-color: $eic-primary;
        outline: none;
        box-shadow: 0 0 0 1px $eic-primary;
      }
    }

    .eic-custom-layout-history-preview {
      box-sizing: content-box;
      display: block;
      width: 64px;
      height: 64px;
      overflow: hidden;
      border: 1px solid $eic-line;
      background: $eic-soft-line;

      .eic-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        clear: none;
        text-align: left;
      }

      .eic-frame {
        display: block;
        flex: 0 0 auto;
        width: 64px;
        height: 64px;
        margin: 0;
        border: 1px solid #747474 !important;
        overflow: hidden;
        box-shadow: none;
      }

      .eic-image {
        border: 1px solid #747474 !important;
        background: #fff !important;
      }

      .eic-image-size,
      .eic-image-controls,
      .eic-divider {
        display: none !important;
      }
    }

    .eic-custom-layout-history-details {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .eic-custom-layout-history-title {
      overflow: hidden;
      color: $eic-ink;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .eic-custom-layout-history-time {
      margin-top: 3px;
      color: $eic-muted;
      font-size: 11px;
      line-height: 1.3;
    }

    .eic-setting-row-slider {
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr) minmax(58px, auto);
      align-items: center;
      column-gap: 10px;
      row-gap: 6px;
    }

    .slider-value-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      min-height: 26px;
      padding: 3px 8px;
      border-radius: 4px;
      background: #fff;
      color: $eic-muted;
      font-size: 12px;
      font-weight: 600;
      vertical-align: top;
    }

    .eic-adjustable-value {
      position: relative;
      border: 1px solid $eic-line;
      cursor: pointer;

      &::before,
      &::after {
        position: absolute;
        left: 50%;
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -6px);
        transition: opacity 120ms ease, transform 120ms ease;
      }

      &::before {
        content: "";
        top: -7px;
        border: 5px solid transparent;
        border-top-color: #1d2327;
      }

      &::after {
        content: attr(data-eic-tooltip);
        bottom: calc(100% + 6px);
        width: max-content;
        max-width: 180px;
        padding: 5px 8px;
        border-radius: 4px;
        background: #1d2327;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
      }

      &:hover,
      &:focus {
        border-color: $eic-primary;
        color: $eic-primary;
        outline: none;
        box-shadow: 0 0 0 1px $eic-primary;

        &::before,
        &::after {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }
    }

    #custom-grid-width-slider,
    #custom-grid-ratio-slider,
    #custom-border-width-slider,
    #custom-border-radius-slider {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }
  }

  .eic-custom-layout-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
    padding: 20px;
    border: 1px solid $eic-line;
    border-radius: 6px;
    background:
      linear-gradient(45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(-45deg, $eic-soft-line 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, $eic-soft-line 75%),
      linear-gradient(-45deg, transparent 75%, $eic-soft-line 75%);
    background-color: #fff;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;

    .eic-container {
      min-width: max-content;
    }
  }

  .creating-image-preview {
    text-align: center;
  }

  .eic-placeholder {
    display: none;
  }

  .eic-frame {
    width: 500px;
    height: 500px;
    border: 3px solid #444;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    .eic-image {
      border: 3px solid #444;
      background: transparent !important;
    }

    .eic-image-size {
      display: inline-block !important;
    }

    .eic-image-controls {
      display: none;
      position: relative;
      z-index: 3;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 8px;

      .eic-image-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        width: 34px;
        margin: 4px;
        border-radius: 4px;
        background-color: rgba(34, 113, 177, 0.95);
        color: #fff;
        text-align: center;
        line-height: 34px;
        font-size: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

        &:hover {
          background-color: $eic-primary-hover;
          cursor: pointer;
        }
      }

      .eic-image-control-image,
      .eic-image-control-text-frame,
      .eic-image-control-manipulate,
      .eic-image-control-link,
      .eic-image-control-caption,
      .eic-image-control-remove {
        display: none;
      }
    }

    .eic-divider {
      position: absolute;
      z-index: 10;
      background-color: #333;
      border: 1px solid #fff;
    }
  }
}

.eic-manipulating {
  .manipulating-image-preview {
    text-align: center;
  }

  .eic-manipulating-filters-placeholder,
  .eic-manipulating-properties-placeholder {
    display: none;
  }

  .eic-manipulating-workspace {
    display: flex;
    align-items: flex-start;
    gap: 24px;

    .eic-manipulating-controls {
      @include eic-settings-sidebar;
    }

    .eic-manipulating-filters {
      .eic-manipulating-filter {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        border: 1px solid $eic-primary;
        border-radius: 4px;
        color: $eic-primary;
        background: #fff;
        padding: 4px 9px;
        margin: 0 6px 6px 0;
        font-weight: 600;

        &.active {
          background-color: $eic-primary;
          color: #fff;
        }

        &:hover {
          cursor: pointer;
          border-color: $eic-primary-hover;
          color: $eic-primary-hover;
        }
      }
    }

    .eic-manipulating-properties {
      .eic-setting-row-slider {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr) minmax(44px, auto);
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
      }

      .slider,
      .eic-slider {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .slider-value-container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 26px;
        padding: 3px 8px;
        border-radius: 4px;
        background: #fff;
        color: $eic-muted;
        font-size: 12px;
        font-weight: 600;
        vertical-align: top;
      }

      .eic-adjustable-value {
        position: relative;
        border: 1px solid $eic-line;
        cursor: pointer;

        &::before,
        &::after {
          position: absolute;
          left: 50%;
          z-index: 50;
          opacity: 0;
          pointer-events: none;
          transform: translate(-50%, -6px);
          transition: opacity 120ms ease, transform 120ms ease;
        }

        &::before {
          content: "";
          top: -7px;
          border: 5px solid transparent;
          border-top-color: #1d2327;
        }

        &::after {
          content: attr(data-eic-tooltip);
          bottom: calc(100% + 6px);
          width: max-content;
          max-width: 180px;
          padding: 5px 8px;
          border-radius: 4px;
          background: #1d2327;
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          line-height: 1.3;
          text-align: center;
          white-space: nowrap;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
        }

        &:hover,
        &:focus {
          border-color: $eic-primary;
          color: $eic-primary;
          outline: none;
          box-shadow: 0 0 0 1px $eic-primary;

          &::before,
          &::after {
            opacity: 1;
            transform: translate(-50%, 0);
          }
        }
      }

      .eic-manipulating-reset-properties {
        width: 100%;
        text-align: center;
      }
    }

    .eic-manipulating-preview {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 260px;
      overflow: auto;
      padding: 20px;
      border: 1px solid $eic-line;
      border-radius: 6px;
      background:
        linear-gradient(45deg, $eic-soft-line 25%, transparent 25%),
        linear-gradient(-45deg, $eic-soft-line 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, $eic-soft-line 75%),
        linear-gradient(-45deg, transparent 75%, $eic-soft-line 75%);
      background-color: #fff;
      background-position: 0 0, 0 8px, 8px -8px, -8px 0;
      background-size: 16px 16px;
      text-align: center;
    }

    .eic-manipulating-image {
      position: relative;
      min-height: 220px;

      img,
      canvas {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
      }

      .eic-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -15px 0 0 -25px;
      }
    }
  }
}

.eic-links,
.eic-captions {
  .custom-links-preview,
  .captions-preview {
    text-align: center;
  }

  .eic-links-workspace,
  .eic-captions-workspace {
    max-width: 840px;
    margin: 0 auto;
  }

  .eic-links-images,
  .eic-captions-images {
    width: 100%;
    clear: both;
    margin: 0 auto;
    border: 1px solid $eic-line;
    border-radius: 6px;
    border-collapse: separate;
    border-spacing: 0;
    background: $eic-surface;

    tr + tr td {
      border-top: 1px solid $eic-soft-line;
    }

    td {
      padding: 12px;
      vertical-align: middle;

      &:nth-child(1) {
        width: 220px;
        height: 112px;
        text-align: center;
        background: $eic-panel;
      }
    }

    img {
      max-width: 200px;
      max-height: 100px;
      border-radius: 4px;
    }

    input[type="text"] {
      min-height: 34px;
      border-radius: 4px;
    }

    .eic-links-images-link,
    .eic-captions-images-caption {
      width: 100%;
    }

    .eic-links-images-link-nofollow {
      margin-left: 24px;
    }
  }
}

.eic-image-size {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.82);
  color: $eic-ink;
  font-size: 12px;
  font-weight: 600;
}

.eic-premium-only {
  margin: 0 auto 18px;
  max-width: 560px;
  padding: 12px 14px;
  border: 1px solid #f0b849;
  border-radius: 6px;
  background: #fff8e5;
  color: #8a5a00;
  text-align: center;

  a {
    color: #674200;
    font-weight: 700;
  }
}

.eic-upgrade-preview {
  max-width: 760px;
  margin: 0 auto;

  img {
    max-width: 100%;
    height: auto;
    border: 1px solid $eic-line;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
}

// Spinner

.eic-spinner {
  display: none;
  margin: 0 auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.eic-spinner > div {
  background-color: #333;
  height: 100%;
  margin: 0 1px;
  width: 3px;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.eic-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.eic-spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.eic-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.eic-spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
       transform: scaleY(1.0);
       -webkit-transform: scaleY(1.0);
     }
}

/**
 * Featherlight - ultra slim jQuery lightbox
 * Version 1.0.3 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2014, Noel Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
@media all {
  .eic-lightbox {
    display: none;

    /* dimensions: spanning the background from edge to edge */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* position: centering content */
    text-align: center;

    /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
    white-space: nowrap;
  }

  .eic-lightbox:before {
    /* position: trick to center content vertically */
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }

  .eic-lightbox .eic-lightbox-content {
    /* make content container for positioned elements (close button) */
    position: relative;

    /* position: centering vertical and horizontal */
    text-align: left;
    vertical-align: middle;
    display: inline-block;

    /* dimensions: cut off images */
    overflow: auto;
    padding: 0;

    /* dimensions: handling small or empty content */
    min-width: 30%;

    /* dimensions: handling large content */
    margin-left: 24px;
    margin-right: 24px;
    max-height: calc(100vh - 72px);

    /* styling */
    background: #fff;
    cursor: auto;

    /* reset white-space wrapping */
    white-space: normal;
  }

  /* contains the content */
  .eic-lightbox .eic-lightbox-inner {
    /* make sure its visible */
    display: block;
  }

  .eic-lightbox .eic-lightbox-close-icon {
    position: absolute;
    z-index: 9999;
    top: 13px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid $eic-line;
    border-radius: 4px;
    background: #fff;
    color: $eic-muted;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    &:hover,
    &:focus {
      border-color: $eic-primary;
      color: $eic-primary;
      outline: none;
    }
  }
}

/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
  .eic-lightbox {
    .eic-lightbox-content {
      width: calc(100vw - 20px);
      height: calc(100vh - 24px);
      max-height: calc(100vh - 24px);
      margin-left: 10px;
      margin-right: 10px;
      padding: 0;
    }

    .eic-lightbox-close-icon {
      top: 8px;
      right: 8px;
    }
  }

  .eic-modal {
    .eic-modal-header {
      height: auto;
      min-height: 54px;
      margin: 0;
      padding: 8px 52px 8px 12px;
    }

    .eic-modal-body {
      padding: 14px;
    }

    .eic-modal-title {
      font-size: 14px;
    }

    .eic-modal-action {
      min-height: 32px;
      height: 32px;
      padding: 6px 9px;
    }
  }

  .eic-editing {
    .eic-editing-workspace {
      display: block;
    }

    .eic-properties {
      max-width: none;
      width: 100%;
      margin-bottom: 16px;
    }
  }

  .eic-creating {
    .eic-custom-layout-workspace {
      display: block;
    }

    .eic-custom-layout-properties {
      max-width: none;
      width: 100%;
      margin-bottom: 16px;
    }
  }

  .eic-text-frames-workspace {
    display: block;

    .eic-text-frames-properties {
      max-width: none;
      width: 100%;
      margin-bottom: 16px;
    }
  }

  .eic-manipulating {
    .eic-manipulating-workspace {
      display: block;

      .eic-manipulating-controls {
        max-width: none;
        width: 100%;
        margin-bottom: 16px;
      }
    }
  }

  .eic-links,
  .eic-captions {
    .eic-links-images,
    .eic-captions-images {
      td {
        display: block;
        width: 100% !important;
      }

      .eic-links-images-link-nofollow {
        margin-left: 0;
      }
    }
  }
}