@charset "UTF-8";
.e-aae-a-btn-base {
  cursor: pointer;
}

.aae-btn-divide:hover .e-divider-base {
  width: 120%;
}

.aae-btn-cross:hover .e-divider-base {
  height: 120%;
}

.aae-btn-underline:hover .e-divider-base {
  width: 0%;
  min-width: 0;
}

.aae-btn-outlinepill:hover .e-div-block-base {
  z-index: 0;
  top: 4px;
  width: 50%;
  transform: translate(-50%, -100%);
}

.aae-btn-slidefill:hover > .e-div-block-base:last-of-type {
  z-index: 4;
  left: -92%;
}

.e-aae-a-btn-base:hover .aae-btn-divide-hr {
  width: 120%;
}

.e-aae-a-btn-base:hover .aae-btn-cross-hr {
  height: 120%;
}

.e-aae-a-btn-base:hover .aae-btn-underline-hr {
  width: 0%;
  min-width: 0;
}

.e-aae-a-btn-base:hover .aae-btn-outlinepill-hr {
  z-index: 0;
  top: 4px;
  width: 50%;
  transform: translate(-50%, -100%);
}

.e-aae-a-btn-base:hover .aae-btn-slidefill-bgfront {
  z-index: 4;
  left: -92%;
}

/* text flip  */
.aae-btn-txtflip .e-paragraph-base {
  transform-style: preserve-3d;
}

.aae-btn-txtflip .e-paragraph-base::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: attr(data-text);
  transition: color 0.3s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  text-align: inherit;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.aae-btn-txtflip:hover .e-paragraph-base {
  transform: rotateX(90deg) translateY(-100%);
}

/* border devide */
.aae-btn-borderdivide .aae-btn-borderdivide-icon-inner svg {
  transition: all 0.3s;
}

.aae-btn-borderdivide .aae-btn-borderdivide-icon-inner svg[data-swap-clone] {
  position: absolute;
  inset: 0;
  transform: translate(-10px, 10px);
  opacity: 0;
}

.aae-btn-borderdivide.e-aae-a-btn-base:hover {
  color: var(--aae-btn-hover-color, inherit);
}

.aae-btn-borderdivide:hover .aae-btn-borderdivide-icon-inner svg[data-swap-clone] {
  transform: translate(0, 0);
  opacity: 1;
}

.aae-btn-borderdivide:hover .aae-btn-borderdivide-icon-inner svg:not([data-swap-clone]) {
  transform: translate(10px, -10px);
  opacity: 0;
}

@keyframes aae_mask_animation {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes aae_mask_animation_2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.aae-btn-mask .e-divider-base {
  box-sizing: border-box;
  -webkit-mask: var(--aae-btn-mask-img, url("../images/mask-btn.png"));
  mask: var(--aae-btn-mask-img, url("../images/mask-btn.png"));
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  animation: aae_mask_animation_2 0.7s steps(22) forwards;
}

.aae-btn-mask:hover .e-divider-base {
  animation: aae_mask_animation 0.7s steps(22) forwards;
}

/*
 * "Default" preset hover-style variants (aae-btn-{aae_btn_hover_style}).
 *
 * Selector is `.e-aae-a-btn-base.aae-btn-{value}` (THREE classes compounded
 * on the root, not two) on purpose: the divider is a plain native e-divider,
 * so its own size/position are freely editable from the Style panel like
 * any other divider, and a per-instance local style class is exactly as
 * specific as a plain two-class hook-class rule (`.elementor .e-<hash>` is
 * two classes too). On that tie the LATER stylesheet in the DOM wins, which
 * is not reliably this one — a user setting e.g. Height on the divider (or
 * even Elementor pre-filling min-height/min-width, as seen on a real button)
 * can silently override the geometry this effect depends on and the whole
 * variant goes visually dead. The extra `.e-aae-a-btn-base` class (always
 * present alongside the hook class — see aae-a-btn.html.twig) costs nothing
 * and reliably wins that tie for the structural props below, while
 * `background-color` is deliberately never set here, so it stays the one
 * thing that IS still under the Style panel's control.
 */
.e-aae-a-btn-base.aae-btn-hover-none .e-divider-base {
  display: none;
}

.e-aae-a-btn-base.aae-btn-hover-divide .e-divider-base {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scaleX(0);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}

.e-aae-a-btn-base.aae-btn-hover-divide:hover .e-divider-base {
  transform: translate(-50%, -50%) scaleX(1.2);
  opacity: 1;
}

.e-aae-a-btn-base.aae-btn-hover-cross .e-divider-base {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 150%;
  height: 0%;
  transform: translate(-50%, -50%);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}

.e-aae-a-btn-base.aae-btn-hover-cross:hover .e-divider-base {
  height: 120%;
  opacity: 1;
}

.e-aae-a-btn-base.aae-btn-hover-cropping .e-divider-base {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 150%;
  height: 0%;
  transform: translate(-50%, -50%) rotate(25deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}

.e-aae-a-btn-base.aae-btn-hover-cropping:hover .e-divider-base {
  height: 400%;
  opacity: 1;
}

.e-aae-a-btn-base.aae-btn-rollover-top .e-divider-base {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: -1;
}

.e-aae-a-btn-base.aae-btn-rollover-top:hover .e-divider-base {
  inset-block-start: 0;
  inset-block-end: auto;
  height: 100%;
}

.e-aae-a-btn-base.aae-btn-rollover-left .e-divider-base {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  z-index: -1;
}

.e-aae-a-btn-base.aae-btn-rollover-left:hover .e-divider-base {
  transform: scaleX(1);
}

.e-aae-a-btn-base.aae-btn-rollover-cross .e-divider-base {
  width: 0;
  visibility: hidden;
}

.e-aae-a-btn-base.aae-btn-rollover-cross .e-divider-base::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-block-end: 100%;
  inset-inline-start: 100%;
  opacity: 0;
  visibility: visible;
  border-block-end: var(--aae-btn-rollover-cross-width, 1px) solid var(--aae-btn-rollover-cross-color, #000);
  border-inline-start: var(--aae-btn-rollover-cross-width, 1px) solid var(--aae-btn-rollover-cross-color, #000);
  transition: all 0.75s;
}

.e-aae-a-btn-base.aae-btn-rollover-cross .e-divider-base::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-block-start: 100%;
  inset-inline-end: 100%;
  opacity: 0;
  visibility: visible;
  border-block-start: var(--aae-btn-rollover-cross-width, 1px) solid var(--aae-btn-rollover-cross-color, #000);
  border-inline-end: var(--aae-btn-rollover-cross-width, 1px) solid var(--aae-btn-rollover-cross-color, #000);
  transition: all 0.75s;
}

.e-aae-a-btn-base.aae-btn-rollover-cross:hover .e-divider-base::before {
  inset-block-end: 0;
  inset-inline-start: 0;
  opacity: 1;
}

.e-aae-a-btn-base.aae-btn-rollover-cross:hover .e-divider-base::after {
  inset-block-start: 0;
  inset-inline-end: 0;
  opacity: 1;
}

.e-aae-a-btn-base.aae-btn-parallal-border .e-divider-base {
  width: 0;
  visibility: hidden;
}

.e-aae-a-btn-base.aae-btn-parallal-border .e-divider-base::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-block-end: 0;
  inset-inline-start: 0;
  opacity: 0;
  visibility: visible;
  border-block-end: var(--aae-btn-parallal-border-width, 1px) solid var(--aae-btn-parallal-border-color, #000);
  border-inline-start: var(--aae-btn-parallal-border-width, 1px) solid var(--aae-btn-parallal-border-color, #000);
  transform: scale(0);
  transform-origin: bottom left;
  transition: all 0.75s;
}

.e-aae-a-btn-base.aae-btn-parallal-border .e-divider-base::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-block-start: 0;
  inset-inline-end: 0;
  opacity: 0;
  visibility: visible;
  border-block-start: var(--aae-btn-parallal-border-width, 1px) solid var(--aae-btn-parallal-border-color, #000);
  border-inline-end: var(--aae-btn-parallal-border-width, 1px) solid var(--aae-btn-parallal-border-color, #000);
  transform: scale(0);
  transform-origin: top right;
  transition: all 0.75s;
}

.e-aae-a-btn-base.aae-btn-parallal-border:hover .e-divider-base::before,
.e-aae-a-btn-base.aae-btn-parallal-border:hover .e-divider-base::after {
  opacity: 1;
  transform: scale(1);
}
/*# sourceMappingURL=btn.css.map */