// 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

@import "refactor/common-refactor.scss";

.grid-track-marker {
  .marker-shape {
    fill: var(--grid-editor-marker-color);
  }
  .marker-text {
    fill: var(--app-white);
    font-size: calc($s-12 / var(--zoom));
    font-family: worksans;
  }
}

.grid-editor-wrapper {
  cursor: grab;
  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;
  font-size: calc($fs-12 / var(--zoom));
  font-weight: 400;
  margin: 0;
  max-width: calc($s-60 / var(--zoom));
  padding: 0;
  padding: calc($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($s-6 / var(--zoom));
  right: calc($s-20 / var(--zoom));
  width: calc($s-20 / var(--zoom));
  height: calc($s-20 / var(--zoom));

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

.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($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: $s-44;
  left: 50%;
  z-index: $z-index-20;

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

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

  .board-name {
  }

  .locate-btn {
    @extend .button-secondary;
    text-transform: uppercase;
    padding: $s-8 $s-20;
    font-size: $fs-11;
  }
  .done-btn {
    @extend .button-primary;
    text-transform: uppercase;
    padding: $s-8 $s-20;
    font-size: $fs-11;
  }
  .close-btn {
    @extend .button-tertiary;
    svg {
      @extend .button-icon;
    }
  }
}
