@mixin overlay() {
  top: $margin-vertical * 5 !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  background-color: $color-content-background;
  padding: $padding-vertical $padding-horizontal;
  border-radius: $border-radius-primary;
  box-shadow: $box-shadow-secondary;
}

@mixin overlay-full() {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0;
  padding-top: em($font-size-base) +  4 * $padding-vertical;

  @include screen-small() {
    padding-top: $padding-vertical;
  }

  .close {
    top: $padding-vertical;
    right: $padding-vertical;

    @include screen-small() {
      right: - 1.5 * $padding-vertical;
      top: - 1.5 * $padding-vertical;
    }
  }
}

@mixin overlay-large() {
  @include overlay-full();

  @include screen-small {
    top: 2% !important;
    bottom: 2% !important;
    right: 2% !important;
    left: 2% !important;
  }
}

@mixin overlay-medium() {
  @include overlay-full();

  @include screen-small {
    top: $margin-vertical * 5 !important;
    height: 60% !important;
    right: 10% !important;
    left: 10% !important;
  }

  @include screen-medium {
    right: 15% !important;
    left: 15% !important;
  }

  @include screen-large {
    right: 20% !important;
    left: 20% !important;
  }
}

@mixin overlay-small() {
  @include overlay-full();

  @include screen-small {
    top: $margin-vertical * 5 !important;
    height: 400px !important;
    right: 20% !important;
    left: 20% !important;
  }

  @include screen-medium {
    right: 25% !important;
    left: 25% !important;
  }

  @include screen-large {
    right: 30% !important;
    left: 30% !important;
  }
}
