/*
 * Dual Button widget.
 */
.ekl-dual-button-wrap {
  @apply flex w-full;
}

.ekl-dual-button {
  --ekl-dual-button-gap: 0px;
  --ekl-connector-size: 38px;
  --ekl-connector-ring-width: 8px;
  --ekl-connector-ring-color: rgba(255, 255, 255, 0.35);
  @apply relative inline-flex flex-wrap items-center justify-center;
}

.ekl-dual-button__button {
  @apply inline-flex items-center no-underline justify-center gap-2 px-8.5 py-6.25 text-[15px] font-medium leading-none text-white transition-all duration-300 ease-in-out;

  i,
  svg {
    @apply block;
  }

  svg {
    @apply h-[1em] w-[1em] fill-current;
  }
}

.ekl-dual-button__primary {
  @apply text-white bg-[#5527d7] hover:opacity-95 transition-all duration-300 hover:bg-[#4821bd] hover:text-white;
}

.ekl-dual-button__secondary {
  @apply text-white bg-[#e5377f] hover:opacity-95 transition-all duration-300 hover:bg-[#c42b6e] hover:text-white;
}

/*
 * The connector sits seamlessly between the two buttons over the junction seam.
 */
.ekl-dual-button__connector {
  width: var(--ekl-connector-size, 38px);
  height: var(--ekl-connector-size, 38px);
  margin-inline: calc(
    -0.5 * var(--ekl-connector-size, 38px) + var(--ekl-dual-button-gap, 0px)
  );
  box-shadow: 0 0 0 var(--ekl-connector-ring-width, 8px)
    var(--ekl-connector-ring-color, rgba(255, 255, 255, 0.35));
  @apply relative z-[2] inline-flex items-center justify-center rounded-full bg-white text-[12px] font-bold tracking-wider uppercase text-slate-700 shrink-0 select-none;

  i,
  svg {
    @apply block text-[13px];
  }

  svg {
    @apply h-[1em] w-[1em] fill-current;
  }
}

/*
 * Horizontal layout (Pill design)
 */
.ekl-dual-button--row,
.ekl-dual-button[data-layout="row"],
.ekl-dual-button-layout-row .ekl-dual-button,
.ekl-dual-button:not(.ekl-dual-button--column) {
  @apply flex-row items-center;

  .ekl-dual-button__primary {
    border-radius: 9999px 0 0 9999px;
  }

  .ekl-dual-button__secondary {
    border-radius: 0 9999px 9999px 0;
  }
}

/*
 * Vertical layout (Stacked design)
 */
.ekl-dual-button--column,
.ekl-dual-button[data-layout="column"],
.ekl-dual-button-layout-column .ekl-dual-button,
.ekl-dual-button-layout-tablet-column .ekl-dual-button,
.ekl-dual-button-layout-mobile-column .ekl-dual-button {
  @apply flex-col items-stretch;

  .ekl-dual-button__button {
    @apply w-full text-center justify-center min-w-42.5 px-7 py-4;
  }

  .ekl-dual-button__primary {
    border-radius: 24px 24px 0 0;
    @apply pt-5 pb-9.5;
  }

  .ekl-dual-button__secondary {
    border-radius: 0 0 24px 24px;
    @apply pt-9.5 pb-5;
  }

  .ekl-dual-button__connector {
    align-self: center;
    margin-inline: auto;
    margin-block: calc(
      -0.5 * var(--ekl-connector-size, 38px) + var(--ekl-dual-button-gap, 0px)
    );
  }
}