//----------------------------------------------------------------------

// Alignment classes
//
// Align element content using classes.

.align--left { text-align: left; }
.align--right { text-align: right; }
.align--center { text-align: center; }
.float--left { float: left !important; }
.float--right { float: right !important; }

//----------------------------------------------------------------------

// Depth classes
//
// Add depth to elements using classes.

.depth--none {
  box-shadow: none;
}
.depth--xs {
  box-shadow: 0 1px 2px 0 rgba(color('gray'), 0.1), 0 2px 6px 0 rgba(color('gray'), 0.1);
}

.depth--sm {
  box-shadow: 0 1px 3px 0 rgba(color('gray'), 0.2), 0 2px 8px 0 rgba(color('gray'), 0.1);
}

.depth--md {
  box-shadow: 0 1px 4px 0 rgba(color('gray'), 0.3), 0 3px 12px 0 rgba(color('gray'), 0.1);
}

.depth--lg {
  box-shadow: 0 8px 17px 0 rgba(color('gray'), 0.2), 0 6px 20px 0 rgba(color('gray'), 0.19);
}

.depth--xl {
  box-shadow: 0 12px 15px 0 rgba(color('gray'), 0.24), 0 17px 50px 0 rgba(color('gray'), 0.19);
}

//----------------------------------------------------------------------

// Responsive media
//
// Responsive images and embedded video

img.responsive--img,
video.responsive--video {
  max-width: 100%;
  height: auto;
  &.fullwidth {
    min-width: 100%;
  }
}

.container--video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;

  iframe, object, embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}


//----------------------------------------------------------------------

// Truncate
//
// Truncate element text in the UI.

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//----------------------------------------------------------------------

// Clearfix
//
// Using flexbox should remove the need for clearfix, but you can use it to ensure elements float correctly.

.clearfix {
  clear: both;
  &:before, &:after {
    flex-basis: 0;
    order: 1;
  }
}