// =============================================================================
// _MAIN.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Clearfix
//   02. Quick Floats
//   03. Centering
//   04. Toggling Content
//   05. Visibility
//   06. Opacity
// =============================================================================

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

.cf {
  @include clearfix();
}



// 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,
.screen-reader-text,
.screen-reader-response,
.bp-screen-reader-text {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
}


//
// 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;
}



// Opacity
// =============================================================================

.transparent {
  opacity: 0;
}

.opaque {
  opacity: 1;
}