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

// ==========================================================================
// $Shame
// @see http://csswizardry.com/2013/04/shame-css/
// Thanks https://github.com/heroheman/shepherd/blob/master/sass/_shame.scss
// ==========================================================================
//
// ==========================================================================
// because hacks happen.
//
// be very specific about what each piece of code is doing, and
// how to better fix it later
// ==========================================================================
//
// Try:  $ git blame _shame.scss
//
// Rules:
// ---------------
//   1. If it’s a hack, it goes in _shame.scss.
//   2. Document all hacks fully:
//   3. What part of the codebase does it relate to?
//   4. Why was this needed?
//   5. How does this fix it?
//   6. How might you fix it properly, given more time?
//   7. Do not blame the developer; if they explained why they had to do it then their reasons are probably (hopefully) valid.
//   8. Try and clean _shame.scss up when you have some down time.

// Example:
// ---------------
// Nav specificity fix.
//
// Someone used an ID in the header code (`#header a{}`) which trumps the
// nav selectors (`.site-nav a{}`). Use !important to override it until I
// have time to refactor the header stuff.
//
// .site-nav a { color:#BADA55!important; }

$ibo-shame--switch--width: 36px !default;
$ibo-shame--switch--height: 20px !default;

$ibo-shame--slider--background-color: $ibo-color-secondary-600 !default;

$ibo-shame--slider--before--height: 15px !default;
$ibo-shame--slider--before--width: 15px !default;
$ibo-shame--slider--before--background-color: $ibo-color-secondary-300 !default;

$ibo-shame--slider--is-checked--background-color: $ibo-color-primary-600 !default;

$ibo-shame--slider--is-focus--box-shadow: 0 0 1px $ibo-color-primary-600 !default;

$ibo-shame--slider--is-round--border-radius: 20px !default;
$ibo-shame--slider--is-round--before--border-radius: 7px !default;


// N°2847 - Recolor svg illustrations with iTop's primary color
.ibo-svg-illustration--container > svg *[fill="#6c63ff"]{
	fill: $ibo-svg-illustration--fill;
}

// Workaround for a Safari (unsupported browser) issue: https://sourceforge.net/p/itop/discussion/itop-hub/thread/fc97ec4a10/?limit=25#1cc0/9930
// Fix found here: https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome
.ibo-navigation-menu.ibo-is-active .ibo-navigation-menu--drawer{
    transform: translate3d(0,0,0);
}

// Toggler legacy CSS that has somehow been added to iTop 3.0 and that is now used by some extensions
// Round Toggle
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: $ibo-shame--switch--width;
  height: $ibo-shame--switch--height;
  vertical-align: baseline;
}

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

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $ibo-shame--slider--background-color;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: $ibo-shame--slider--before--height;
  width: $ibo-shame--slider--before--width;
  left: 3px;
  bottom: 3px;
  background-color: $ibo-shame--slider--before--background-color;
  transition: .4s;
}

input:checked + .slider {
  background-color: $ibo-shame--slider--is-checked--background-color;
}

input:focus + .slider {
  box-shadow: $ibo-shame--slider--is-focus--box-shadow;
}

input:checked + .slider:before {
  transform: translateX(14.5px);
}

/* Rounded sliders */
.slider.round {
  border-radius: $ibo-shame--slider--is-round--border-radius;
}

.slider.round:before {
  border-radius: $ibo-shame--slider--is-round--before--border-radius;
}