// =============================================================================
// SCSS/SITE/UTIL/_MAIN.SCSS
// -----------------------------------------------------------------------------
// The classes provided in this file assist with various factors in laying out
// pages, including floats, toggling content, hiding content, along with many
// other purposes. All classes are commented if further detail is necessary.
// Must be used in conjunction with mixin files due to use of '@include'.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Clearfix
//   02. Box Model Content Box
//   03. Image Replacement
//   04. Quick Floats
//   05. Centering
//   06. Toggling Content
//   07. Visibility
//   08. Overflow
//   09. Affix Property
// =============================================================================

// Clearfix
// =============================================================================

.cf {
  @include clearfix();
}



// Box Model Content Box
// =============================================================================

.content-box {
  @include box-sizing(content-box);
}



// Hide Text
// =============================================================================

.hide-text {
  @include hide-text();
}



// Quick Floats
// =============================================================================

.right {
  float: right;
}

.left {
  float: left;
}



// Centering
// =============================================================================

.center-block {
  margin-left: auto;
  margin-right: auto;
}

.center-list {
  display: table;
  margin-left: auto;
  margin-right: auto;
}



// Toggling Content
// =============================================================================

.hide {
  display: none;
}

.show {
  display: block;
}



// Visibility
// =============================================================================

//
// Hide from both screenreaders and browsers.
//

.hidden {
  display: none !important;
  visibility: hidden;
}


//
// Hide visually and from screenreaders, but maintain layout.
//

.invisible {
  visibility: hidden;
}


//
// Hide only visually, but have it available for screenreaders.
//

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


//
// Extends the .visually-hidden class to allow the element to be focusable when
// navigated to via the keyboard.
//

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}



// Overflow
// =============================================================================

.overflow-hidden {
  overflow: hidden;
}



// Affix Property
// =============================================================================

.affix {
  position: fixed;
}