:root {
  --cartMaxWidth: 350px;
  --max-z-index: 2147483647;
}

.shopify-buy-modal-is-active {
  height: 100%;
  overflow: auto;
}

.shopify-buy-frame {
  display: inline-block;

  & iframe {
    width: 100%;
    display: block;
    height: 0;
    overflow: hidden;
  }
}

.shopify-buy-frame--cart {
  width: 100%;
  max-width: var(--cartMaxWidth);
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: var(--max-z-index);
  transform: translateX(100%);
  -webkit-transform: translateX(100%);

  & iframe {
    height: 100%;
  }

  &.is-initialized {
    transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  &.is-active {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}

.shopify-buy-frame--product {
  display: block;

  &.shopify-buy__layout-horizontal {
    display: block;
    margin-left: auto;

    margin-right: auto;
    & iframe {
      max-width: 100%;

      @media (min-width: 950px) {
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

.shopify-buy-frame--toggle {
  display: inline-block;

  &:not(.is-sticky) {
    overflow: hidden;
    padding: 5px;
  }

  &.is-sticky {
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: calc(var(--max-z-index) - 2);
  }

  &.is-active.is-sticky {
    display: block;
  }
}

.is-active {
  & .shopify-buy-frame--toggle {
    & iframe {
      min-height: 67px;
    }
  }
}

.shopify-buy-frame--productSet {
  width: 100%;
}

.shopify-buy-frame--modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: calc(var(--max-z-index) - 1);
  display: none;
  transition: background 300ms ease;

  & iframe {
    height: 100%;
    width: 100%;
    max-width: none;
  }

  &.is-active {
    background: rgba(0,0,0,0.6);
  }

  &.is-block {
    display: block;
  }
}