// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "refactor/common-refactor.scss" as deprecated;
@use "ds/z-index.scss" as *;

.grid-track-marker {
  .marker-shape {
    fill: var(--grid-editor-marker-color);
  }

  .marker-text {
    fill: var(--app-white);
    font-size: calc(deprecated.$s-12 / var(--zoom));
    font-family: "worksans", "vazirmatn", sans-serif;
  }
}

.grid-editor-wrapper {
  cursor: grab;
  position: relative;
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid-editor-header-hover {
  fill: var(--grid-editor-marker-color);
}

.grid-editor-label {
  flex: 1;
  background: none;
  border: 0;
  color: var(--grid-editor-marker-text);
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: calc(deprecated.$fs-12 / var(--zoom));
  font-weight: 400;
  margin: 0;
  max-width: calc(deprecated.$s-60 / var(--zoom));
  padding: 0;
  padding: calc(deprecated.$s-4 / var(--zoom));
  text-align: center;

  &:focus {
    outline: none;
  }
}

.grid-editor-button {
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc(deprecated.$s-6 / var(--zoom));
  right: calc(deprecated.$s-20 / var(--zoom));
  width: calc(deprecated.$s-20 / var(--zoom));
  height: calc(deprecated.$s-20 / var(--zoom));
  opacity: 0;
  pointer-events: none;

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(deprecated.$s-16 / var(--zoom));
    height: auto;
    stroke: var(--grid-editor-marker-color);
  }
}

.grid-editor-wrapper:hover .grid-editor-button {
  opacity: 1;
  pointer-events: auto;
}

.grid-frame {
  fill: var(--grid-editor-marker-color);
  fill-opacity: 0.1;
}

.grid-plus-button {
  cursor: pointer;
  opacity: 0.5;

  .grid-plus-shape {
    fill: var(--grid-editor-plus-btn-background);
    stroke: var(--grid-editor-plus-btn-background);
    stroke-width: calc(deprecated.$s-1 / var(--zoom));
  }

  .grid-plus-icon {
    stroke: var(--grid-editor-plus-btn-foreground);
  }

  &:hover {
    opacity: 1;
  }
}

.grid-cell-outline {
  fill: transparent;
  stroke: var(--grid-editor-line-color);
  stroke-opacity: 0.5;
  stroke-width: calc(1 / var(--zoom));

  &.hover,
  &.selected {
    stroke-opacity: 1;
    stroke-width: calc(2 / var(--zoom));
  }
}

.grid-actions {
  pointer-events: none;
  position: absolute;
  top: deprecated.$s-44;
  left: 50%;
  z-index: var(--z-index-notifications);
}

.grid-actions-container {
  @include deprecated.flex-row;

  background: var(--panel-background-color);
  border-radius: deprecated.$br-12;
  box-shadow: 0 0 deprecated.$s-12 0 var(--menu-shadow-color);
  gap: deprecated.$s-8;
  height: deprecated.$s-48;
  margin-left: -50%;
  padding: deprecated.$s-8;
  cursor: initial;
  pointer-events: initial;
  width: deprecated.$s-512;
}

.grid-actions-title {
  flex: 1;
  font-size: deprecated.$fs-12;
  color: var(--color-foreground-secondary);
  padding-left: deprecated.$s-8;
}

.close-btn {
  @extend %button-tertiary;

  svg {
    @extend %button-icon;
  }
}