/* ============================================================================
  # Global
============================================================================== */

body.modal--open {
  height: 100vh;
  overflow-y: hidden;
}

// This is a "placeholder" margin until JS can assign inline style based on exact search/announcement bar height.
// It's purpose is to reduce cumulative layout shift on mobile.
@include av-mq("pocket") {
  main:not([style*="margin-top"]) {
    margin-top: 93px;
  }
}

.Container {
  margin: 0 auto;
  padding: 0 10px;

  @include av-mq("phone") {
    &.Container--full-mobile {
      padding: 0;
    }
  }

  @include av-mq("tablet") {
    .shopify-section--content-blocks & {
      padding: 0 35px;
    }
  }

  @include av-mq("lap-and-up") {
    max-width: 1440px;
    padding: 0 60px;
  }

  &--narrow {
    max-width: 1420px;
  }

  &--extraNarrow {
    max-width: 800px;
  }

  &--productTemplate {
    max-width: 1105px;
    padding: 0;
  }
}

/*
    This fixes an issue in IE10/11 when using min-height in flex children
    @info: https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
 */

.FlexboxIeFix {
  display: flex;
  flex-direction: row;
}

.Section {
  &--spacingNormal {
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 0;
    @include av-mq("lap-and-up") {
      padding: 35px 0;
    }
  }

  &--spacingSmall {
    margin-bottom: 0;
    margin-top: 0;
    padding: 20px 0;
  }

  .shopify-section:first-child & {
    &--spacingNormal,
    &--spacingSmall {
      padding-top: 0;
    }
  }

  .content-template[data-section-type="static-content-template"] & {
    &--spacingNormal {
      padding-bottom: 60px;
    }
  }
}

.Section--bordered {
  border-top: 1px solid $border-color-secondary;
}

.shopify-section--bordered + .shopify-section--bordered {
  border-top: 1px solid $border-color-secondary;
}

/* ----------------------------------------------------------------------------
* TOOLTIP
* ----------------------------------------------------------------------------
*/

@media (-moz-touch-enabled: 0), (hover: hover) {
  [data-tooltip] {
    position: relative;

    &::before {
      background: $light-background;
      border: 1px solid $border-color;
      bottom: 70%;
      color: $text-color-light;
      content: attr(data-tooltip);
      font-size: to-size(13px);
      left: 70%;
      max-width: 150px;
      opacity: 0;
      overflow: hidden;
      padding: 4px 11px 3px;
      pointer-events: none;
      position: absolute;
      text-overflow: ellipsis;
      transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
      visibility: hidden;
      white-space: nowrap;
      z-index: 1;
    }

    &.position-left {
      &::before {
        left: auto;
        right: 0;
      }
    }

    &.position-bottom {
      &::before {
        bottom: 0;
      }
    }

    @include av-mq("lap-and-up") {
      &:hover::before {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}

// Preview bar getting in the way in development, hide bar not working.
iframe[src="//localhost:3000/preview_bar"]
{
  height: 60px;
}

sup {
  line-height: 0;
}