/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

/* SCSS variables */
$ibo-dashboard--grid--width: 100% !default;
$ibo-dashboard--grid--elements-spacing-x: $ibo-dashlet--elements-spacing-x !default;
$ibo-dashboard--grid--elements-spacing-y: $ibo-dashlet--elements-spacing-y !default;
$ibo-dashboard--grid--edit-mode--margin: 1px !default;
$ibo-dashboard--grid--edit-mode--border-color: $ibo-color-grey-400 !default;
$ibo-dashboard--grid--edit-mode--border: 2px $ibo-dashboard--grid--edit-mode--border-color dashed !default;
$ibo-dashboard--grid--edit-mode--width: 100% !default;
$ibo-dashboard--grid--edit-mode--min-height: 40px !default;

$ibo-dashboard--top-bar-padding-bottom: 20px !default;

$ibo-dashboard--selector--margin-left: $ibo-spacing-400 !default;
$ibo-dashboard--selector--margin-right: 1 !default;
$ibo-dashboard--selector--hover--background-color: $ibo-color-secondary-100 !default;
$ibo-dashboard--selector--hover--border-radius: $ibo-button--border-radius !default;
$ibo-dashboard--selector--selector-label--margin-x: 10px !default;

$ibo-dashboard--switch--width: 30px !default;
$ibo-dashboard--switch--height: $ibo-size-300 !default;

$ibo-dashboard--slider--before--content: "\f007" !default;
$ibo-dashboard--slider--before--font-size: $ibo-font-size-50 !default;
$ibo-dashboard--slider--before--color: $ibo-color-secondary-800 !default;
$ibo-dashboard--slider--before--right: 5px !default;
$ibo-dashboard--slider--before--bottom: 3px !default;

$ibo-dashboard--slider--after--content: "\f1ad" !default;
$ibo-dashboard--slider--after--font-size: $ibo-font-size-150 !default;
$ibo-dashboard--slider--after--color: $ibo-color-primary-600 !default;
$ibo-dashboard--slider--after--left: 6px !default;
$ibo-dashboard--slider--after--bottom: 1px !default;




/* Rules */
.ibo-dashboard--top-bar {
  @extend %ibo-full-height-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: $ibo-dashboard--top-bar-padding-bottom;

  .ibo-dashboard--top-bar-title {
    @extend %ibo-font-ral-bol-250;
  }

  .ibo-dashboard--top-bar-toolbar {
    display: flex;
    align-items: center;
  }
}

.ibo-dashboard--selector {
  display: flex;
  align-items: center;
  margin-left: $ibo-dashboard--selector--margin-left;
  margin-right: $ibo-dashboard--selector--margin-right;

  &:hover {
    background-color: $ibo-dashboard--selector--hover--background-color;
    border-radius: $ibo-dashboard--selector--hover--border-radius;
  }

  .selector-label {
    display: inline-block;
    margin-left: $ibo-dashboard--selector--selector-label--margin-x;
    margin-right: $ibo-dashboard--selector--selector-label--margin-x;
    vertical-align: super;
  }
}

.ibo-dashboard--grid {
  width: $ibo-dashboard--grid--width;
}

.ibo-dashboard--grid-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden; /* Because of the column negative margin (which is for the dashlets spacing) */

  /* Compensate negative margin on inner borders to simulate egal dashlets spacing between rows */
  &:not(:last-child) {
    padding-bottom: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
  }

  &:not(:first-child) {
    padding-top: calc(#{$ibo-dashboard--grid--elements-spacing-y} / 2);
  }
}

.ibo-dashboard--grid-column {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  width: calc(100% + (2 * #{$ibo-dashboard--grid--elements-spacing-x}));
  margin: calc(-1 * #{$ibo-dashboard--grid--elements-spacing-y} / 2) calc(-1 * #{$ibo-dashboard--grid--elements-spacing-x} / 2); /* Because of the margin all around the dashlets, we need to compensate it */
  min-width: 0;

  /* Compensate negative margin on inner borders to simulate equal dashlets spacing between columns */
  &:not(:last-child) {
    margin-right: 0;
  }

  &:not(:first-child) {
    margin-left: 0;
  }

  &.edit_mode {
    margin: $ibo-dashboard--grid--edit-mode--margin;
    border: $ibo-dashboard--grid--edit-mode--border;
    width: $ibo-dashboard--grid--edit-mode--width;
    min-height: $ibo-dashboard--grid--edit-mode--min-height;
  }
}


// Round Toggle
/* The switch - the box around the slider */
.ibo-dashboard--switch {
  position: relative;
  display: inline-block;
  width: $ibo-dashboard--switch--width;
  height: $ibo-dashboard--switch--height;
  vertical-align: baseline;
}

/* Hide default HTML checkbox */
.ibo-dashboard--switch input {
  display: none;
}

/* The slider */
.ibo-dashboard--slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ibo-dashboard--slider:before {
  @extend %fa-solid-base;
  content: $ibo-dashboard--slider--before--content;
  font-size: $ibo-dashboard--slider--before--font-size;
  color: $ibo-dashboard--slider--before--color;
  position: absolute;
  right: $ibo-dashboard--slider--before--right;
  bottom: $ibo-dashboard--slider--before--bottom;
}

.ibo-dashboard--slider:after {
  @extend %fa-solid-base;
  content: $ibo-dashboard--slider--after--content;
  font-size: $ibo-dashboard--slider--after--font-size;
  color: $ibo-dashboard--slider--after--color;
  position: absolute;
  left: $ibo-dashboard--slider--after--left;
  bottom: $ibo-dashboard--slider--after--bottom;
}

input:checked + .ibo-dashboard--slider:before {
  content: $ibo-dashboard--slider--after--content;
}

input:checked + .ibo-dashboard--slider:after {
  content: $ibo-dashboard--slider--before--content;
}

// TODO 3.3 Cleanup variables
// TODO 3.3 Move to vendor what's from gridstack


.grid-stack {
  display: block;
}

.ibo-dashboard[data-edit-mode="edit"] .grid-stack{
  background-size: calc(100% / 12) var(--gs-cell-height);
  background-color: $ibo-color-white-100;
  background-image: linear-gradient(to right, $ibo-color-white-200 8px, transparent 8px), linear-gradient(to bottom, $ibo-color-white-200 8px, transparent 8px);
  --gs-item-margin-top: 8px;
  --gs-item-margin-bottom: 0;
  --gs-item-margin-right: 0;
  --gs-item-margin-left: 8px;
}

ibo-dashboard[data-edit-mode="view"] {
  .ibo-dashboard--form {
    display: none;
  }
}

.ibo-dashboard--form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  height: 55px;
  background-color: $ibo-color-blue-200;
  margin: -16px -36px 24px -36px;
  padding: 0 36px;
}

.ibo-dashboard--form--inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;

  @extend %common-font-ral-med-250;
}

.ibo-dashboard[data-edit-mode="edit"] ibo-dashlet:not([data-edit-mode="edit"]):hover .ibo-dashlet--actions {
  display: block;
}

.ibo-dashboard[data-edit-mode="error"] .grid-stack{
  background-image: url($approot-relative + '/images/alpha-fatal-error.gif');
}

// Our edit mode dashboard already has its own header, so we hide the standard one
#ibo-page-header:has(+ ibo-dashboard[data-edit-mode="edit"]) {
  display: none;
}

.ibo-dashboard[data-edit-mode="edit"] .ibo-dashboard--grid:has(ibo-dashboard-grid-slot > ibo-dashlet[data-edit-mode="edit"]) .ibo-dashboard--grid--backdrop {

  position: absolute;
  height: calc(100% + 24px);
  // 36px is $ibo-page-container--elements-padding-x, handle variable resolution
  width: calc(100% + 36px + 36px);
  margin: -24px -#{36px} 0 -#{36px};
  background-color: $ibo-color-grey-400;
  z-index: 2;
  opacity: 60%;
}