.u-ui-container-floating {
  @include container;
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 4500;
}

.u-ui-grid {
  @include grid;
}

.u-ui-grid-floating-col {
  @include col;
  @include col-width(1);
  opacity: 0;
  transform: scaleY(0);
  transition: opacity 300ms cubic-bezier(0.73, 0.02, 0.51, 0.99) 0s,
    transform 300ms cubic-bezier(0.73, 0.02, 0.51, 0.99) 0s;

  .u-ui-container-floating & {
    background-color: transparent;
    padding-bottom: 0;
    padding-top: 0;
  }

  .u-ui-container-floating.is-active & {
    opacity: 1;
    transform: scaleY(1);
    transition-duration: 500ms, 1s;
  }

  &__inner {
    @include col-inner-base;
  }

  &__color {
    background-color: rgba(255, 0, 0, 0.1);
    height: 100vh;
  }
}