// 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 "ds/_sizes.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_utils.scss" as *;

// ============================================================
// SIDEBAR & GRID CONFIGURATION
// ============================================================
//
//  - We need to mantain these values in sync with the constants defined in
//    frontend/src/app/main/constants.cljs
//
// ============================================================
// DIMENSIONS
// ============================================================
//
// Left sidebar
$left-sidebar-width: px2rem(318);
$left-sidebar-width-max: $sz-500;

// Right sidebar
$right-sidebar-width: px2rem(318);
$right-sidebar-width-max: px2rem(768);

// ============================================================
// GRID SYSTEM (used inside right sidebar)
// ============================================================
//
// We use a 8-column grid with fixed column width and spacing.
// Useful for consistent layout alignment across components.
//

$column-width: $sz-32; // width of each grid column
$column-gap: var(--sp-xs); // spacing between columns
$column-number: 8; // total number of columns

//      |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
//   -> 8 columns (32px each) + 7 gaps (4px each) = 284px

// Derived widths
@function grid-width($cols) {
  @return calc(#{$column-width} * #{$cols} + #{$column-gap} * #{$cols - 1});
}

$options-width: grid-width($column-number);
$two-column-width: grid-width(2);
$three-column-width: grid-width(3);
$four-column-width: grid-width(4);
$seven-column-width: grid-width(7);

// ------------------------------------------------------------
// Grid mixin — applies the standard structure to any container
// ------------------------------------------------------------
@mixin option-grid-structure {
  display: grid;
  grid-template-columns: repeat(#{$column-number}, #{$column-width});
  column-gap: #{$column-gap};
}

// ============================================================
// LAYOUT LOGIC — CALCULATED ELEMENTS
// ============================================================
//
// This section defines special cases where elements don’t
// perfectly fit the standard grid rhythm.
//
// Example: Two input blocks + one button inside an 8-column grid.
//
// Visual explanation:
//   |----|_____________________________________________|-----|---|
//   -> 284px options-width + 2*12px paddings + 10px scrollbar gutter
//
//        |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
//   -> 8 columns (32px each) + 7 gaps (4px each) = 284px
//
//   But two blocks don’t fit perfectly:
//   First  (grid-exception-input-width)
//        |__________________|-|__________________|-|___|
// We calculate the width of that grid-exception-input-width as:
//
//   - 3.5 columns of base grid width
//   - + 3 inter-column gaps
//   - − half a gap (because it’s visually shared with the next block)
$grid-exception-input-width: calc(#{$sz-32} * 3.5 + 3 * var(--sp-xs) - (var(--sp-xs) / 2));

//
//        |___|-|___|-|___|-|___|-|___|-|___|-|___|-|___|
//
//   Second  (grid-exception-input-width-small)
//        |__________________|-|____________|-|___|-|___|
//
// We calculate the width of that grid-exception-input-width-small as:
//
//   - 2.5 columns of base grid width
//   - + 2 inter-column gaps
//   - − half a gap (because it’s visually shared with the next block)

$grid-exception-input-width-small: calc(#{$sz-32} * 2.5 + 2 * var(--sp-xs) - (var(--sp-xs) / 2));

// ============================================================
// CSS VARIABLES (exposed for runtime use)
// ============================================================
//
// Make sidebar and layout values accessible to JS/CSS consumers.

:root {
  --left-sidebar-width: #{$left-sidebar-width};
  --left-sidebar-width-max: #{$left-sidebar-width-max};
  --right-sidebar-width: #{$right-sidebar-width};
  --right-sidebar-width-max: #{$right-sidebar-width-max};
  --two-columns-width: #{$two-column-width};
  --three-columns-width: #{$three-column-width};
  --four-columns-width: #{$four-column-width};
  --seven-columns-width: #{$seven-column-width};
  --options-width: #{$options-width};
  --grid-exception-input-width: #{$grid-exception-input-width};
  --grid-exception-input-width-small: #{$grid-exception-input-width-small};
}