/**
* General visibility classes
* We can't use initial because IE10 needs to be supported
*/

.visible-large {
  display: none;
}

.visible-inline-flex-small,
.visible-inline-small,
.visible-between,
.visible-inline-block-small,
.visible-block-small,
.visible-small {
  display: none !important;
}

.visible-inline-block-large,
.visible-desktop,
.visible-block-desktop,
.visible-inline-desktop,
.visible-inline-block-desktop {
  display: none !important;
}

@media #{$mediaSmall} {

  .visible-block-small,
  .visible-small {
    display: block !important;
  }

  .visible-inline-flex-small {
    display: inline-flex !important;
  }

  .visible-inline-small,
  span.visible-small:not(.visible-block-small):not(.visible-inline-block-small) {
    display: inline !important;
  }

  .visible-inline-block-small {
    display: inline-block !important;
  }

  .hide-small {
    display: none !important;
  }
}

@media #{$mediaDesktop} {
  .hide-desktop {
    display: none;
  }

  .visible-desktop {
    display: block !important;
  }

  .visible-inline-desktop {
    display: inline !important;
  }

  .visible-block-desktop {
    display: block !important;
  }

  .visible-inline-block-desktop {
    display: inline-block !important;
  }

  td, th {
    &.visible-desktop {
      display: table-cell;
    }
  }
}

@media #{$mediaInBetween} {

  .hide-between {
    display: none !important;
  }

  .visible-between {
    display: block !important;
  }

  td, th {
    &.visible-between {
      display: table-cell;
    }
  }
}

@media #{$mediaLarge} {

  .hide-large {
    display: none;
  }

  .visible-large {
    display: block;
  }

  span.visible-large {
    display: inline;
  }

  td, th {
    &.visible-large {
      display: table-cell;
    }
  }

  .visible-inline-block-large {
    display: inline-block !important;
  }
}