// this is for grid
.fizz-align-items-end {
  align-items: end;
}

.fizz-frame-square {
  --size: 100%;
  border: $border-width-thin solid $color-border-default;
  padding: $spacing-4;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  background-color: $color-background-surface;
}

.fizz-frame-square > * {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.fizz-highlight-on-hover:hover {
  background-color: $color-background-highlight;
}

a.fizz-highlight-on-hover {
  display: block;
}

a.fizz-highlight-on-hover:hover {
  background-color: $color-background-highlight-interactive;
  text-decoration: none;
}

.fizz-scroller {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  width: 100%;
}  

.fizz-iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

.fizz-overflow-x {
  overflow-x: auto;
}

.fizz-overflow-y {
  overflow-y: auto;
}

.fizz-overflow-hidden {
  overflow: hidden;
}

@media (max-width: $breakpoint-m) {
  .fizz-overflow-x-small {
    --extra: (#{$spacing-32});
    overflow-y: auto;
    width: calc(100% + var(--extra));
  }
  .fizz-flex-row.fizz-overflow-x-small {
    justify-content: flex-start;
  }
}

.fizz-full-height {
  min-height: 100vh;
}

@media (min-width: $breakpoint-m) {
  .fizz-floating {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.14);
  }
  
  .fizz-wrapper-large {
    max-width: calc(#{$breakpoint-xl} + #{$spacing-32});
    margin-left: auto;
    margin-right: auto;
    padding-left: $spacing-16;
    padding-right: $spacing-16;
  }

  .fizz-iframe-small {
    width: 395px;
  }

  .fizz-position-relative {
    position: relative;
  }
}

[class*="fizz-container"] {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

.fizz-container-xl {
  max-width: $breakpoint-xl;
}