//sass-lint:disable no-important
ul.inline-list li{
  display: inline-block;
}

.valign {
  display: table;
  width: 100%;
  height: inherit;
}
.valign-cell {
  display: table-cell;
  vertical-align: middle;
}

.margin-bottom-50{
  margin-bottom: rem-calc(50) !important;
}

.full {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}

.center{
  //for when you really _really_ need that centered text.
  text-align:center !important;
}

/* These are required because without them, users will see a flash of mobile content. This has been doucmented here: https://github.com/zurb/foundation-sites/issues/7083
*/
.no-js [data-responsive-toggle] {
  display: none;
}
.title-bar{
  display: none;
}

/*NOOOOOOO*/
.no-scroll{
  height:100%;
  overflow: hidden;
}

.no-scale{
  width:auto;
  height:auto;
}

.no-margin{
  margin:0 !important;
}

.no-padding {
  padding:0!important;
}

.nowrap {
  white-space: nowrap!important;
}

table.no-alternate{
  tr:nth-child(even){
    background-color:color(ghost-gray);
  }
}

.accessible,
a.skip-link,
.screen-reader-text {
  @extend %accessible;
}

ul.border-bottom-list li{
  border-bottom:1px solid color(dark-gray);
  padding:$spacing-small 0;
  &:last-child{
    border-bottom: none;
  }
}

.columns-2-mu {
  @media screen and (min-width: 40em) {
    -moz-column-count: 2;
    -moz-column-gap: 1.42857rem;
    -webkit-column-count: 2;
    -webkit-column-gap: 1.42857rem;
    column-count: 2;
    column-gap: 1.42857rem;
  }
}


.break-after {
  &:after {
    white-space: pre;
    content: '\A';
  }
}
.break-after-mu {
  @media screen and (min-width: 40em) {
    &:after {
      white-space: pre;
      content: '\A';
    }
  }
}

.break-before {
  &:before {
    white-space: pre;
    content: '\A';
  }
}
.break-before-sm {
  &:before {
    white-space: pre;
    content: '\A';
  }
  @media screen and (min-width: 40em) {
    &:before {
      white-space: normal;
      content: none;
    }
  }
}
.break-before-mu {
  @media screen and (min-width: 40em) {
    &:before {
      white-space: pre;
      content: '\A';
    }
  }
}


.sentence-case {
  &::first-letter {
    text-transform: capitalize;
  }
}

@media screen and (min-width: 40em) {
  .valign-mu {
    display: table;
    height: inherit;
  }
}
.full-width {
  width: 100%;
}

//This is a fix for issues related to scrolling on iOS
html.is-reveal-open{
  overflow: hidden;
}
.directory{
  .reveal {
    &.full {
      min-height: initial;
    }
  }
}

.item-fa-left-indent{
  margin-left:1.4rem;
}

.valign-top{
  vertical-align: top;
}
.valign-bottom{
  vertical-align: bottom;
}

.hover-fade, %hover-fade{
  opacity:1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;

  &:hover{
    opacity: .5;
  }
}

/*provides option to apply a hover-fade to items in which the link state should not change*/
.hover-fade-keep-a{
  a:hover {
    color: color(ben-franklin-blue);
  }
  @extend %hover-fade;
}
.bdr-all{
  border-width: 1px;
  border-style: solid;
}

.bdr-bottom{
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.bdr-right{
  border-right-width: 1px;
  border-right-style: solid;
}
.bdr-left{
  border-left-width: 1px;
  border-left-style: solid;
}
.bdr-top{
  border-top-width: 1px;
  border-top-style: solid;
}

.bdr-right-mu {
  border-right: 0;
  @media screen and (min-width: 40em) {
    border-right-width: 1px;
    border-right-style: solid;
  }
}

.nbdr-right-mu {
  @media screen and (min-width: 40em) {
    border-right-width: 0px;
    border-right-style: solid;
  }
}

.bdr-bottom-sm {
  border-bottom: 1px;
  border-bottom-style: solid;
  @media screen and (min-width: 40em) {
    border-bottom-width: 0px;
  }
}

/* TODO Generate all width options 10 - 100*/
.percent-90{
  width: 90%;
}

.full-height{
  height:100%;
}

/* Classes to mimic a single CSS rule */
.float-none{
  float:none;
}

.inline-block{
  display: inline-block;
}

.list-style-none {
  list-style: none;
}

.text-align-left{
  text-align: left !important;
}

.list-style-none {
  list-style: none;
}

.all-caps{
  text-transform: uppercase;
}

.group::after {
  display: table;
  content: "";
  clear: both;
}

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