/*!
 * # Semantic UI - Site
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type: 'global';
@element: 'site';

@import (multiple) '../../theme.config';

/*******************************
             Page
*******************************/

.loadFonts();

html,
body {
  height: 100%;
}

html {
  font-size: @emSize;
}

body.cms-ui,
#toolbar {
  color: @textColor;
  font-family: @pageFont;
  font-size: @fontSize;
  font-smoothing: @fontSmoothing;
  line-height: @lineHeight;

  /*******************************
             Headers
  *******************************/

  h1,
  h2,
  h3,
  h4,
  h5 {
    padding: 0;
    margin: @headerMargin;
    font-family: @headerFont;
    font-weight: @headerFontWeight;
    line-height: @headerLineHeight;
  }

  h1 {
    min-height: 1rem;
    font-size: @h1;
  }

  h2 {
    font-size: @h2;
  }

  h3 {
    font-size: @h3;
  }

  h4 {
    font-size: @h4;
  }

  h5 {
    font-size: @h5;
  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child {
    margin-top: 0;
  }

  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child {
    margin-bottom: 0;
  }

  /*******************************
             Text
  *******************************/

  p {
    margin: @paragraphMargin;
    line-height: @paragraphLineHeight;
  }

  p:first-child {
    margin-top: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }

  /*********************
        Links
  *********************/

  a {
    color: @linkColor;
    text-decoration: @linkUnderline;
  }

  a:hover {
    color: @linkHoverColor;
    text-decoration: @linkHoverUnderline;
  }
}

body.cms-ui {
  min-width: @pageMinWidth;
  padding: 0;
  margin: 0;
  background: @pageBackground;
  overflow-x: @pageOverflowX;
}

/*******************************
         Scrollbars
*******************************/

.addScrollbars() when (@useCustomScrollbars) {
  /* Force Simple Scrollbars */
  body.cms-ui ::-webkit-scrollbar {
    width: @customScrollbarWidth;
    height: @customScrollbarHeight;
    -webkit-appearance: none;
  }

  body.cms-ui ::-webkit-scrollbar-track {
    border-radius: @trackBorderRadius;
    background: @trackBackground;
  }

  body.cms-ui ::-webkit-scrollbar-thumb {
    border-radius: @thumbBorderRadius;
    background: @thumbBackground;
    cursor: pointer;
    transition: @thumbTransition;
  }

  body.cms-ui ::-webkit-scrollbar-thumb:window-inactive {
    background: @thumbInactiveBackground;
  }

  body.cms-ui ::-webkit-scrollbar-thumb:hover {
    background: @thumbHoverBackground;
  }

  /* Inverted UI */
  body.cms-ui .ui.inverted::-webkit-scrollbar-track {
    background: @trackInvertedBackground;
  }

  body.cms-ui .ui.inverted::-webkit-scrollbar-thumb {
    background: @thumbInvertedBackground;
  }

  body.cms-ui .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
    background: @thumbInvertedInactiveBackground;
  }

  body.cms-ui .ui.inverted::-webkit-scrollbar-thumb:hover {
    background: @thumbInvertedHoverBackground;
  }
}

/*******************************
          Highlighting
*******************************/

/* Site */
// ::-webkit-selection {
//   background-color: @highlightBackground;
//   color: @highlightColor;
// }
// ::-moz-selection {
//   background-color: @highlightBackground;
//   color: @highlightColor;
// }
// ::selection {
//   background-color: @highlightBackground;
//   color: @highlightColor;
// }

/* Form */
// textarea::-webkit-selection,
// input::-webkit-selection {
//   background-color: @inputHighlightBackground;
//   color: @inputHighlightColor;
// }
// textarea::-moz-selection,
// input::-moz-selection {
//   background-color: @inputHighlightBackground;
//   color: @inputHighlightColor;
// }
// textarea::selection,
// input::selection {
//   background-color: @inputHighlightBackground;
//   color: @inputHighlightColor;
// }

.addScrollbars();

.loadUIOverrides();