/*
 * @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--top-bar-padding-bottom: 20px !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: 12px;
  margin-right: 1px;

  &:hover {
    background-color: $ibo-color-secondary-100;
    border-radius: $ibo-button--border-radius;
  }

  .selector-label {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    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 egal dashlets spacing between columns */
  &:not(:last-child) {
    margin-right: 0;
  }

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

  &.edit_mode {
    margin: 1px;
    border: 2px #ccc dashed;
    width: 100%;
    min-height: 40px;
  }
}


// Round Toggle
/* The switch - the box around the slider */
.ibo-dashboard--switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 24px;
  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 {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: $ibo-color-secondary-800;
  content: "\f007";
  font-family: "Font Awesome 5 Free", serif;
  font-size: $ibo-font-size-50;
  font-weight: 900;
}

.ibo-dashboard--slider:after {
  position: absolute;
  left: 6px;
  bottom: 1px;
  color: $ibo-color-primary-600;
  content: "\f1ad";
  font-family: "Font Awesome 5 Free", serif;
  font-size: $ibo-font-size-150;
  font-weight: 900;
}

input:checked + .ibo-dashboard--slider:before {
  content: "\f1ad";
}

input:checked + .ibo-dashboard--slider:after {
  content: "\f007";
}
