@use 'sass:math';
$toplayerBackgroundColor: $white;
$toplayerMarginTop: 65px;
$toplayerMarginBottom: rhythm(1);
$layoutMaxWidth: 1024px;

$includeHtml: false !default;

@if ($includeHtml) {
  .sg-toplayer {
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: var(--border-radius-xs);
    width: 100%;
    box-shadow: $shadowLarge;
    background-color: $toplayerBackgroundColor;
    position: relative;

    &--transparent {
      background-color: transparent;
    }

    &--lead {
      .sg-toplayer__wrapper {
        @include sgBreakpoint(medium-up) {
          padding: rhythm(2) gutter(2);
        }
      }
    }

    &--fill {
      display: block;
      position: absolute;
      z-index: 1;
      margin: 0;
      bottom: 0;
      right: 0;
      top: 0;
      left: 0;
    }

    &--small {
      @include sgBreakpoint(medium-up) {
        width: 410px;
      }
    }

    &--medium {
      @include sgBreakpoint(medium-up) {
        width: 600px;
      }
    }

    &--large {
      @include sgBreakpoint(medium-up) {
        width: 700px;
      }
    }

    &--modal {
      z-index: $toplayerZIndex;
      position: relative;
      margin-bottom: $toplayerMarginBottom;

      @include sgBreakpoint(medium-up) {
        margin-top: $toplayerMarginTop;
      }
    }

    &--with-bugbox {
      .sg-toplayer__wrapper {
        @include sgBreakpoint(medium-up) {
          @include image2x($sgImagesPath + 'bug_box@2x.png', 299px, 248px);
          background-image: url($sgImagesPath + 'bug_box.png');
          background-repeat: no-repeat;
          background-position: bottom right;
        }
      }
    }

    &--small-spaced {
      @include sgBreakpoint(small-only) {
        margin-top: gutter(4);
        max-width: gutter(14);
        margin-left: gutter(1);
        margin-right: gutter(1);
      }
    }

    &--splash-screen {
      overflow: hidden;
      margin: gutter(math.div(1, 2));
      min-height: 100%;
      min-height: calc(
        100% - #{gutter(1)}
      ); // https://github.com/sass/sass/issues/818

      @include sgBreakpoint(medium-up) {
        min-height: calc(100% - #{gutter(2)});
        margin: gutter(1);
      }
    }

    &--limited-width {
      max-width: $layoutMaxWidth;
    }

    &--row {
      flex-direction: row;
    }

    &__close {
      display: flex;
      position: absolute;
      right: 0;
      top: 0;
      padding: gutter(math.div(1, 2));
      cursor: pointer;
      z-index: 1;
    }

    &__wrapper {
      padding: rhythm(1) gutter(1);
      width: 100%;

      &--no-padding {
        padding: 0;
      }
    }

    &__actions {
      @include componentsContainer();
      min-height: rhythm(2);
    }
  }
}