.c-overlay {
  $self: #{&};
  $content: #{$self}__content;

  @at-root {
    #{$self} {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      width: auto;
      height: auto;
      background-color: rgba(#000, .45);
      overflow: hidden;

      &.is-absolute {
        position: absolute;
        width: 100%;
      }
    }

    #{$content} {
      margin: auto;
    }

  }

  &-enter-active,
  &-leave-active {
    transition: .3s ease;
  }

  &-enter,
  &-leave-to {
    opacity: 0;
  }

  &-leave,
  &-enter-to {
    opacity: 1;
  }

}