// Form
$form-group-margin-bottom: space-x(3);

/// Topbar
$topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation)
$topbar-input-width: 304px;
$topbar-item-margin: space-x(0.5);
$topbar-fixed-button-width: 136px;

/// Sidebar
$sidebar-width: 480px;
$sidebar-height: calc(100vh - #{ $topbar-height });
$sidebar-tab-margin-x: space-x(2.5);

/// Grid constants
$layout-height: calc(100vh - #{ $topbar-height} ); // @TODO: use css custom properties

/// Misc
$overlay-radius: 5px;


@mixin aside-topbar() {
  $border-color: mix-alpha($navbar-dark-hover-color, 5%);

  padding: 0 space-x(1);
  height: 100%;

  @include right-handed() {
    border-left: 1px solid $border-color;
  }

  @include left-handed() {
    border-right: 1px solid $border-color
  }
}

@mixin top-teaser() {
  background: linear-gradient(
    to top,
    mix-alpha($body-bg, 0%) 0%,
    mix-alpha($body-bg, 100%) 45%
  );
}

@mixin bottom-teaser() {
  background: linear-gradient(
    to bottom,
    mix-alpha($body-bg, 0%) 0%,
    mix-alpha($body-bg, 100%) 45%
  );
}


@mixin term-window() {
  @include hidden-scrollbar;

  $teaser-height: 16px;

  background-color: $body-bg;
  height: 100%;
  position: relative;
  z-index: 0;

  &::before {
    @include top-teaser;

    content: "";
    z-index: z-index("tile", "top-teaser");
    pointer-events: none;
    position: sticky;
    top: 0;
    height: $teaser-height;
    width: 100%;
    display: block;
  }

  &::after {
    @include bottom-teaser;

    content: "";
    z-index: z-index("tile", "bottom-teaser");
    pointer-events: none;
    position: sticky;
    bottom: 0;
    height: $teaser-height;
    width: 100%;
    display: block;
  }
}