import n, { keyframes as i, css as e } from "styled-components";
import { getColorAlias as t, convertToTransientProps as a } from "../../utils/index.js";
const r = 100, s = i`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`, l = i`
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`, p = i`
  0% {
    transform: translateY(100%);
  }
  75% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0%);
  }
`, u = n.div.withConfig({
  shouldForwardProp: a([
    "isOpened",
    "allowBackgroundInteractions",
    "isOpened"
  ])
})`
  inset: 0;
  position: fixed;
  background-color: ${({ allowBackgroundInteractions: o }) => o ? "transparent" : t("overlay")};
  z-index: 5000;
  display: flex;
  justify-content: center;

  ${({ allowBackgroundInteractions: o }) => o && e`
      pointer-events: none;

      > div {
        pointer-events: auto;
      }
    `}

  ${({ isOpened: o }) => o ? e`
          animation: ${s} ${r}ms forwards;
          height: 100%;
        ` : e`
          animation: ${l} ${r}ms
            ${r}ms forwards;
          height: 0px;
        `}
`, $ = n.div`
  display: flex;
  flex-flow: column;
  font-family: ${(o) => o.theme.font.familyPrimary};
  position: fixed;
  bottom: 0px;
  color: ${t("contentDefault")};
  background: ${t("containerDefault")};
  border-radius: ${({ theme: { radius: o } }) => `${o.roundedC} ${o.roundedC} ${o.roundedNone} ${o.roundedNone}`};
  min-width: 320px;
  box-shadow: rgb(0 0 0 / 20%) 0px -5px 9px -3px;

  animation: ${p} cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
  animation-duration: 300ms;
  width: 100%;
  z-index: 1000;

  ::after {
    content: '';
    background: ${t("containerDefault")};
    height: 5%;
    width: 100%;
    position: absolute;
    bottom: -5%;
  }

  ${({ position: o }) => {
  switch (o) {
    case "left":
      return e`
          left: 0;
        `;
    case "right":
      return e`
          right: 0;
        `;
  }
}}

  ${({ width: o }) => o ? e`
          width: ${o};
        ` : e`
          max-width: 480px;
        `}

  ${({ height: o }) => o ? e`
          height: ${o};
        ` : e`
          max-height: 406px;
        `}
`, m = n.div`
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: auto;
`, h = n.div.withConfig({
  shouldForwardProp: a([
    "pinnedHeader",
    "pinnedFooter"
  ])
})`
  ${({ pinnedFooter: o }) => !o && e`
      display: inline-flex;
      flex-flow: column;
      flex-grow: 1;
      justify-content: space-between;
    `}

  ${({ pinnedHeader: o }) => o && e`
      overflow-y: auto;
    `}
`, x = n.div.withConfig({
  shouldForwardProp: a(["hasPullTab"])
})`
  width: 100%;
  height: 20px;
  position: absolute;
  cursor: pointer;
  background: ${t("containerDefault")};
  border-radius: ${({ theme: { radius: o } }) => `${o.roundedC} ${o.roundedC} ${o.roundedNone} ${o.roundedNone}`};
  z-index: 1;

  ${({ hasPullTab: o }) => o && e`
      ::before {
        content: '';
        position: absolute;
        display: inline;
        top: 0px;
        left: 50%;
        transform: translate(-50%, 8px);
        width: 32px;
        height: 4px;
        background: ${t("borderStrong")};
        border-radius: ${({ theme: d }) => d.radius.roundedC};
      }
      background: unset;
    `}
`, w = n.div`
  border-radius: ${({ theme: { radius: o } }) => `${o.roundedC} ${o.roundedC} ${o.roundedNone} ${o.roundedNone}`};
`;
export {
  $ as BottomSheetWrapper,
  w as CustomHeaderWrapper,
  h as InnerWrapper,
  m as MainContentWrapper,
  u as Overlay,
  x as PullTab
};
