/**
 * Custom variables followed by theme variables followed by Bootstrap variables
 * to ensure cascade of styles.
 */

// Bootstrap functions
@import '~bootstrap/scss/functions';

// Theme functions
@import 'theme/functions';

// Custom variables
@import 'user-variables';

// Theme variables
@import 'theme/variables';

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,

  "primary-desat": $primary-desat, // NEW
  "black": $icenight, // NEW
  "white": $white, // NEW

  "iceblue": $iceblue,
  "icenight": $icenight,
  "icecloud": $icecloud,
  "icestone": $icestone,
  "chartreuse": $chartreuse,
  "phthalo": $phthalo,
  "turquoise": $turquoise,
  "cornflower": $cornflower,
  "cerulean": $cerulean,
  "green": $green,
  "yellow": $yellow,
  "red": $red
);

// Bootstrap core
@import '~bootstrap/scss/bootstrap';

// Theme core
@import 'theme/theme';

// Custom core
@import 'user';

// *,
// *:before,
// *:after {
//   box-sizing: border-box;
// }

pre[class*="language-"] {
  position: relative;
  overflow: auto;

  /* make space  */
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
  border-radius: 10px;
}

div[class*="code"] button {
  position: absolute;
  top: 5px;
  right: 5px;

  font-size: 0.9rem;
  padding: 0.15rem;
  background-color: #828282;

  border: ridge 1px #7b7b7c;
  border-radius: 5px;
  text-shadow: #c4c4c4 0 0 2px;
}

pre[class*="language-"] button:hover {
  cursor: pointer;
  background-color: #bcbabb;
}