/*
 *  Floating Content Box
 *    Simple Floating Box, designed to sit content inside it.
 *
 *  Dependencies:
 *    styles/settings/responsive.scss
 *    styles/tools/_absolute-centering.scss
 *    styles/tools/_responsive.scss
 *
 *  Version:
 *    1.0.0 - 2018/05/11
 */
$o-floating--inset: 5%;

.o-floating-content-box {
  @include t-absolute-position-options($o-floating--inset);
  max-width: 100% - ($o-floating--inset * 2);

  &.is-medium,&.is-large {
    width: 100%;
  }

  &__inner {
    position: relative;
  }

  //Media Queries
  @include t-media-query($s-xsmall-up) {
    &.is-medium {
      width: 450px;
    }
  }

  @include t-media-query($s-small-up) {
    &.is-large {
      width: 700px;
    }
  }

  @include t-media-query($s-large-up) {
    &.is-medium {
      width: 550px;
    }

    &.is-large {
      width: 750px;
    }
  }
}