//
// Custom sass variables and mixins
//
// Variables
// -----------------------------------------------------------------------------
// The variables set here serve only as example of how you can use SASS variables
// to centralize and control frequently used styles more easily. Here you will
// find variables for colors, fonts and the global gutter width.
//
// Mixins
// -----------------------------------------------------------------------------
// To use a mixin in this file, add this line to the top of your .scss file:
//   @import "base"; (_base.scss imports _custom.scss).
//
// Then to use a mixin for a particular rule, add this inside the ruleset's
// curly brackets:
//   @include mix-in-name;
//

//
// Color Variables
// Colors used in the sample global.styles. You can use these to recolor many
// elements such as forms, tables, tabs etc.
//

$page:         #fff;    // to match the page background, default is white
$border:       #ccc;    // all borders set in global.styles - tables, fieldset, primary links
$highlight:    #c00;    // required mark, form error highlight, "new" label on comments
$ultralight:   #f5f5f5; // table row even, primary link inactive tabs
$light:        #eee;    // table row odd active, primary link inactive hover
$medium_light: #ebebeb; // table row even active
$medium_dark:  #e5e5e5; // table thead
$debug:        rgba(255, 192, 203, 0.5); // Full width wrapper test

$thead:          $medium_dark;
$tr_odd:         $page;
$tr_even:        $ultralight;
$tr_odd_active:  $light;
$tr_even_active: $medium_light;

$primary_task:        $ultralight;
$primary_task_hover:  $light;
$primary_task_active: $page;


//
// Font Variables
// These font stacks are an exact copy of the stacks found in AT Cores
// theme settings for web safe fonts.
//

$sans-serif-small:            'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif;
$sans-serif-large:            Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif;
$sans-serif-arial-helvetica:  Arial, Helvetica, sans-serif;
$calibri-candara:             Calibri, Candara, Arial, Helvetica, sans-serif;
$serif-small:                 Garamond, Perpetua, 'Times New Roman', serif;
$serif-large:                 Georgia, Baskerville, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
$modern-myriad:               'Segoe UI', 'Myriad Pro', Myriad, Arial, Helvetica, sans-serif;
$lucida:                      'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', Verdana, Geneva, sans-serif;
$impact:                      Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif;
$mono:                        Consolas, Monaco, 'Courier New', Courier, monospace, sans-serif;


//
// Gutters
//
// Set a variable for the gutters. Adaptivetheme allows you to easly modify the
// global gutter width for precise control over the design. Panel pages need
// special gutter wrangling when a Panel is inside #content wrapper, so to ease
// setting this we use a variable.
//
$gutter-width: 10px;


//
// Markup free clearing
// http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/
//

@mixin cf {
  overflow: hidden;   // New formatting context in better browsers
  *overflow: visible; // Protect IE7 and older from the overflow property
  *zoom: 1;           // Give IE hasLayout, a new formatting context equivalent
}


//
// Image replacement
// Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
// Additional helpers from http://html5boilerplate.com/docs/css/
// This is also included as a SASS mixin, see: sass/custom.rb
//

@mixin ir {
  // Kellum Method
  display: block !important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  // Additional helpers
  border: 0;                     // Remove the default border from elements like <button>
  font: 0/0 a;                   // Crush the text down to take up no space
  text-shadow: none;             // Remove any text shadows
  color: transparent;            // Hide any residual text in Safari 4 and any mobile devices that may need it
  background-color: transparent; // Hide the default background color on elements like <button>
}


//
// element-invisible improved and more robust
//
@mixin element-invisible {
  border: 0;
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax
  }
  clip: rect(1px, 1px, 1px, 1px);
}


//
// Turns off the element-invisible effect
//
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}


//
// Shift content offscreen, can be usefull when you reall need to do this
//
@mixin offscreen {
  position: absolute;
  top: -99999em;
  width: 1px;
  height: 1px;
  overflow: hidden;
  outline: 0;
}


//
// Hide content from all users
//
@mixin element-hidden {
  display: none;
}


//
// The word "Unpublished" displayed underneath unpublished nodes and comments
//
@mixin unpublished {
  color: pink; // target browsers that do not support rgba
  color: rgba(239, 170, 170, 0.4);
  font-family: $impact;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-align: center;
  text-transform: uppercase;
  word-wrap: break-word;

  .ie6-7 &>* {
    position: relative; // Otherwise these elements will appear below the "Unpublished" text.
  }
}