/*!
 * SlickGrid custom styling for Salesforce (https://github.com/ghiscoding/slickgrid-universal)
 * Licensed under MIT (https://github.com/ghiscoding/slickgrid-universal/blob/master/LICENSE)
 * @author: Ghislain B. (ghiscoding)
 */

/**
 * SlickGrid Salesforce Theme
 * (sames as `slickgrid-theme-salesforce.lite.scss` but includes all external 3rd party lib styling)
 */

@forward './variables-theme-salesforce';

@use './colors';
@use './extra-styling';
@use './variables-theme-salesforce' as vts;
@use './slick-without-bootstrap-min-styling';
@use './slick-grid';
@use './slick-editors';
@use './slick-plugins';
@use './slick-component';
@use './slickgrid-examples';
@use './slick-filters';
@use './slick-autocomplete';
@use './slickgrid-icons-svg-utils';
@use './slickgrid-icons';

$slick-editing-field-bg-color: #fff !default;
$slick-editing-field-border: 1px solid #dddbda !default;
$slick-editable-field-bg-color: rgba(227, 240, 251, 0.57) !default;
$slick-editable-field-hover-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23b0adab" viewBox="0 0 52 52"><path d="M9.5 33.4l8.9 8.9c.4.4 1 .4 1.4 0L42 20c.4-.4.4-1 0-1.4l-8.8-8.8c-.4-.4-1-.4-1.4 0L9.5 32.1c-.4.4-.4 1 0 1.3zM36.1 5.7c-.4.4-.4 1 0 1.4l8.8 8.8c.4.4 1 .4 1.4 0l2.5-2.5c1.6-1.5 1.6-3.9 0-5.5l-4.7-4.7c-1.6-1.6-4.1-1.6-5.7 0l-2.3 2.5zM2.1 48.2c-.2 1 .7 1.9 1.7 1.7l10.9-2.6c.4-.1.7-.3.9-.5l.2-.2c.2-.2.3-.9-.1-1.3l-9-9c-.4-.4-1.1-.3-1.3-.1l-.2.2c-.3.3-.4.6-.5.9L2.1 48.2z"></path></svg>') !default;
$slick-editable-field-hover-icon-margin-right: 8px !default;
$slick-editable-field-hover-icon-margin-top: 8px !default;
$slick-editable-field-hover-icon-width: 14px !default;
$slick-editor-grid-cell-border-width-modified: 1px 6px 1px 1px !default;

.grid-canvas {
  // Keep active row above hovered neighbors so active cell focus outline remains visible.
  .slick-row.active {
    z-index: var(--slick-row-active-z-index, 6);
  }

  .slick-row,
  .slick-row.odd {
    /* editable field */
    .slick-cell.editable-field,
    .slick-cell.selected.editable-field {
      background-color: var(--slick-editable-field-bg-color, $slick-editable-field-bg-color);
      &:hover:after {
        content: var(--slick-editable-field-hover-icon, $slick-editable-field-hover-icon);
        position: absolute;
        top: var(--slick-editable-field-hover-icon-margin-top, $slick-editable-field-hover-icon-margin-top);
        right: var(--slick-editable-field-hover-icon-margin-right, $slick-editable-field-hover-icon-margin-right);
        width: var(--slick-editable-field-hover-icon-width, $slick-editable-field-hover-icon-width);
      }
      &.active:hover:after {
        content: none;
      }
    }

    /* editable field with outline border */
    .slick-cell .editing-field,
    .slick-cell.selected .editing-field {
      border: var(--slick-editing-field-border, $slick-editing-field-border);
      padding: 3px 5px 3px 4px;
      margin: -2px;
      height: calc(100% + 4px);
      border-radius: 3px;
      background-color: var(--slick-editing-field-bg-color, $slick-editing-field-bg-color);
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:before {
        content: '';
        display: table;
        clear: both;
      }
      &:hover:after {
        content: var(--slick-editable-field-hover-icon, $slick-editable-field-hover-icon);
        position: absolute;
        top: var(--slick-editable-field-hover-icon-margin-top, $slick-editable-field-hover-icon-margin-top);
        right: var(--slick-editable-field-hover-icon-margin-right, $slick-editable-field-hover-icon-margin-right);
        width: var(--slick-editable-field-hover-icon-width, $slick-editable-field-hover-icon-width);
      }
      &.active:hover:after {
        content: none;
      }
    }

    .slick-cell.unsaved-editable-field {
      .editing-field {
        border: var(--slick-editor-modal-detail-container-border-modified, vts.$slick-editor-modal-detail-container-border-modified);
        border-width: var(--slick-editor-grid-cell-border-width-modified, $slick-editor-grid-cell-border-width-modified);
      }
    }
  }
}