/* widget-button.ts css */
.watermelon-widget-button {
  align-items: center;
  background: var(--watermelon-yg-widget-button-background);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  border: none;
  display: flex;
  height: 56px;
  justify-content: center;
  outline: none;
  position: fixed;
  transition-duration: 300ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  width: 56px;
  z-index: 2147483047;
  cursor: pointer;
  box-shadow: var(--watermelon-yg-widget-button-shadow);
  transition: all 300ms ease;
}

.watermelon-close-widget-button {
  background: var(--watermelon-yg-widget-button-close-icon-background) !important;
}

.watermelon-widget-button:hover {
  box-shadow: var(--watermelon-yg-widget-button-shadow-hover);
}

.watermelon-widget-button:focus-visible {
  outline: 3px solid rgb(43 131 255);
  transition: none;
}

.watermelon-hidden {
  display: none !important;
}

.watermelon-notification {
  align-items: center;
  background-color: var(--watermelon-yg-notifications-badge-background);
  border-radius: 9999px;
  box-shadow: 0 4px 6px 0 rgba(254, 5, 5, 10%);
  color: var(--watermelon-yg-notifications-badge-foreground);
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: -12px;
  top: -8px;
  width: 28px;
}

.watermelon-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(30deg) scale(0);
}

.watermelon-icon-open-stroke {
  stroke: var(--watermelon-yg-widget-button-icon-color);
}

.watermelon-icon-open {
  color: var(--watermelon-yg-widget-button-icon-color);
  height: 24px;
  width: 24px;
}

.watermelon-custom-icon {
  background-image: var(--watermelon-yg-widget-button-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.watermelon-entering-icon {
  animation: 200ms ease 0s 1 forwards watermelon-entering-icon;
}

.watermelon-exiting-icon {
  animation: 100ms ease 0s 1 forwards watermelon-exiting-icon;
}

.position-bottom-right {
  bottom: var(--watermelon-yg-widget-vertical-offset);
  right: var(--watermelon-yg-widget-horizontal-offset);
}

.position-bottom-left {
  bottom: var(--watermelon-yg-widget-vertical-offset);
  left: var(--watermelon-yg-widget-horizontal-offset);
}

.position-top-right {
  top: var(--watermelon-yg-widget-vertical-offset);
  right: var(--watermelon-yg-widget-horizontal-offset);
}

.position-top-left {
  top: var(--watermelon-yg-widget-vertical-offset);
  left: var(--watermelon-yg-widget-horizontal-offset);
}

.watermelon-icon-close-stroke {
  stroke: var(--watermelon-yg-widget-button-close-icon-foreground);
}

.watermelon-icon-close {
  color: var(--watermelon-yg-widget-button-close-icon-foreground);
}

@keyframes watermelon-entering-icon {
  0% {
    transform: rotate(30deg) scale(0);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

@keyframes watermelon-exiting-icon {
  0% {
    transform: rotate(0) scale(1);
  }

  100% {
    transform: rotate(-30deg) scale(0);
  }
}

/* index.ts css */
.watermelon-embed-frame {
  background-color: transparent !important;
  background-image: none !important;
  width: 100%;
  height: 100%;
  border: 0;
}

#watermelon-widget-wrapper {
  display: none;
}

#watermelon-widget-wrapper.is-visible {
  display: block;
}

.wm-lock-scroll {
  overflow: hidden !important;
}

/* BELOW CSS CLASSES ARE FOR TESTING */

/* :root{ */

/*  --watermelon-yg-widget-vertical-offset: 20px; */

/*  --watermelon-yg-widget-horizontal-offset: 24px; */

/*  --watermelon-yg-widget-button-background: #170a07; */

/*  --watermelon-yg-widget-button-icon-color: #fff; */

/*  --watermelon-yg-widget-button-close-icon-background: #170a07; */

/*  --watermelon-yg-widget-button-close-icon-foreground: #fff; */

/*  --watermelon-yg-notifications-badge-background: #ff2934; */

/*  --watermelon-yg-notifications-badge-foreground: #fff; */

/*  --watermelon-yg-widget-button-shadow: 0 8px 12px 0 rgba(23, 10, 7, 12%), 0 4px 4px 0 rgba(23, 10, 8, 8%); */

/*  --watermelon-yg-widget-button-shadow-hover: 0 8px 8px 0 rgba(23, 10, 7, 16%), 0 4px 6px 1px rgba(23, 10, 8, 8%); */

/*  --watermelon-yg-eyecatcher-background: #170a07; */

/*  --watermelon-yg-eyecatcher-foreground: #fff; */

/*  --watermelon-yg-eyecatcher-close-background: #f8f9fb; */

/*  --watermelon-yg-eyecatcher-close-border: #eaebec; */

/*  --watermelon-yg-eyecatcher-close-foreground: #170a07; */

/*  --watermelon-yg-eyecatcher-close-background-hover: #eaebec; */

/*  --watermelon-yg-eyecatcher-close-border-hover: #d8d9da; */

/*  --watermelon-yg-primary-color: #79f9c0; */

/*  --watermelon-yg-text-color: #170a07; */

/*  --watermelon-yg-secondary-text-color: #94918f; */

/*  --watermelon-yg-button-background-color: #170a07; */

/*  --watermelon-yg-button-text-color: #fff; */

/*  --watermelon-yg-background: #fff; */

/*  --watermelon-yg-font-size: 16px; */

/*  --watermelon-yg-font-family: 'Basier Circle', ui-sans-serif, system-ui; */

/* } */
.watermelon-widget-wrapper {
  display: block;
  opacity: 0;
  position: fixed;
  width: 362px;
  height: 748px;
  max-height: calc(100dvh - var(--watermelon-yg-widget-vertical-offset) - 100px);
  max-width: 100vw;
  z-index: 2147483049;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    0 10px 15px -3px rgb(0 0 0 / 10%),
    0 4px 6px -4px rgb(0 0 0 / 10%);
  pointer-events: none;
}

/* Position classes replace dynamic `${vertical}` / `${horizontal}` */
.wm-pos-bottom-right {
  bottom: calc(var(--watermelon-yg-widget-vertical-offset) + 74px);
  right: var(--watermelon-yg-widget-horizontal-offset);
}

.wm-pos-bottom-left {
  bottom: calc(var(--watermelon-yg-widget-vertical-offset) + 74px);
  left: var(--watermelon-yg-widget-horizontal-offset);
}

.wm-pos-top-right {
  top: calc(var(--watermelon-yg-widget-vertical-offset) + 74px);
  right: var(--watermelon-yg-widget-horizontal-offset);
}

.wm-pos-top-left {
  top: calc(var(--watermelon-yg-widget-vertical-offset) + 74px);
  left: var(--watermelon-yg-widget-horizontal-offset);
}

.watermelon-widget-entering-instant {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: none !important;
}

.watermelon-widget-entering {
  animation: 200ms ease-in-out forwards watermelon-widgetAnimation !important;
}

.watermelon-widget-clickable {
  pointer-events: unset;
}

.watermelon-widget-exit {
  animation: 200ms ease-in-out forwards watermelon-widgetExitAnimation;
}

@keyframes watermelon-widgetAnimation {
  0% {
    transform: translateY(24px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes watermelon-widgetExitAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    opacity: .4;
    transform: translateY(12px);
  }

  100% {
    transform: translateY(24px);
    opacity: 0;
    box-shadow: none;
  }
}

.mobileForced {
  height: 100% !important;
  width: 100% !important;
  inset: 0 !important;
  max-height: 100dvh !important;
  z-index: 2147483048 !important;
  border-radius: 0 !important;
}

@media screen and ((((hover: none) or (pointer: coarse)) and (width <= 640px)) or (height <= 500px)) {
  .watermelon-widget-wrapper {
    height: 100%;
    width: 100%;
    inset: 0;
    max-height: 100dvh;
    z-index: 2147483048;
    border-radius: 0;
  }

  @keyframes watermelon-widgetAnimation {
    0% {
      transform: translateY(0);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes watermelon-widgetExitAnimation {
    0% {
      transform: translateY(0);
      opacity: 1;
    }

    100% {
      transform: translateY(0);
      opacity: 0;
      box-shadow: none;
    }
  }
}

watermelon-widget-button,
watermelon-eyecatcher-message,
.watermelon-widget-wrapper {
  font-size: var(--watermelon-yg-font-size);
}