.brxe-button.bricks-button:is(.ejk-button, .ejk-butn) {
  --_pb: var(--at-btn-medium-padding-block);
  --_pi: var(--at-btn-medium-padding-inline);
  --_fs: var(--at-btn-medium-font-size);
  --_radius: var(--at-radius--xs);
  --_icon-size: var(--icon-size, var(--at-space--m));

  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.6px;
  text-transform: none;
  height: fit-content;
  box-sizing: border-box;
  border-radius: var(--_radius);
  padding: calc(var(--_pb) + 0.25rem) var(--_pi) var(--_pb);
  font-size: var(--_fs);
  transition: all 650ms ease;


  & i,
  & svg {
    font-size: var(--_icon-size);
    transition: transform var(--animation-duration, 600ms) ease-in-out var(--animation-delay, 0ms);
  }

  &.ejk-icon-animate-left:hover i,
  &.ejk-icon-animate-left:hover svg {
    transform: translateX(calc(var(--animation-distance, 15px) * -1));
  }

  &.ejk-icon-animate-right:hover i,
  &.ejk-icon-animate-right:hover svg {
    transform: translateX(var(--animation-distance, 15px));
  }

  &.ejk-icon-animate-up:hover i,
  &.ejk-icon-animate-up:hover svg {
    transform: translateY(calc(var(--animation-distance, 15px) * -1));
  }

  &.ejk-icon-animate-down:hover i,
  &.ejk-icon-animate-down:hover svg {
    transform: translateY(var(--animation-distance, 15px));
  }

  &.ejk-icon-size-3xl {
    --_icon-size: var(--at-space--3xl);
  }
  
  &.ejk-icon-size-2xl {
    --_icon-size: var(--at-space--2xl);
  }
  
  &.ejk-icon-size-xl {
    --_icon-size: var(--at-space--xl);
  }
  
  &.ejk-icon-size-l {
    --_icon-size: var(--at-space--l);
  }
  
  &.ejk-icon-size-m: {
    --_icon-size: var(--icon-size, var(--at-space--m));
  }
    
  &.ejk-icon-size-s: {
    --_icon-size: var(--at-space--s);
  }
  
  &.ejk-icon-size-xs: {
    --_icon-size: var(--at-space--xs);
  } 
  
  & .ejk-icon-size-2xs: {
    --_icon-size: var(--at-space--2xs);
  }


  
  &.sm {
    --_pb: var(--at-btn-small-padding-block);
    --_pi: var(--at-btn-small-padding-inline);
    --_fs: var(--at-btn-small-font-size);
    --_radius: var(--at-radius--s);
  }

  &.lg {
    --_pb: var(--at-btn-large-padding-block);
    --_pi: var(--at-btn-large-padding-inline);
    --_fs: var(--at-btn-large-font-size);
    --_radius: var(--at-radius--m);
  }

  &.xl {
    --_pb: var(--at-btn-x-large-padding-block);
    --_pi: var(--at-btn-x-large-padding-inline);
    --_fs: var(--at-btn-x-large-font-size);
    --_radius: var(--at-radius--m);
  }

  

  &:not(.outline) {
    color: var(--at-white);
    background-size: 250% 100%;
    background-position: 2% center;
    box-shadow: var(--at-btn-shadow);
  }

  

  &[class*="primary"]:not(.outline) {
    background-image: var(--ejk-btn-gradient-primary);
    border-color: var(--at-btn-primary-border-color);

    &:hover {
      --brxp-a11y-primary-d-2-text: var(--at-white);
      --brxp-primary-d-7: var(--ejk-primary-l-4);
      background-position: 98% center;
      color: var(--at-white);
      border-color: var(--at-btn-primary-border-color--hover);
      transform: translate(-2px, -2px);
      box-shadow: var(--at-btn-shadow--hover);
    }
  }

  

  &[class*="secondary"]:not(.outline) {
    background-image: var(--ejk-btn-gradient-secondary);
    border-color: var(--at-btn-secondary-border-color);

    &:hover {
      --brxp-secondary-d-7: var(--ejk-secondary-d-7);
      background-position: right center;
      border-color: var(--at-btn-secondary-border-color--hover);
      transform: translate(-2px, -2px);
      box-shadow: var(--at-btn-shadow--hover);
    }
  }

  

  &.outline[class*="primary"]:hover {
    background-color: var(--ejk-primary);
    color: var(--at-white);
  }

  &.outline[class*="secondary"]:hover {
    background-color: var(--ejk-secondary);
    color: var(--ejk-a11y-secondary-text);
  }

  &.outline[class*="dark"]:hover {
    background-color: var(--ejk-dark);
    color: var(--ejk-a11y-dark-text);
  }

  

  &[class*="info"]:not(.outline) {
    --_ctx-h: var(--ejk-info-h);
    --_ctx-s: var(--ejk-info-s);
    --_ctx-l: var(--ejk-info-l);
    --_ctx: var(--ejk-info);
    --_ctx-text: var(--ejk-a11y-info-text);
    --_ctx-bg-bump: 0%;
    --_ctx-border-bump: 20%;
  }

  &[class*="success"]:not(.outline) {
    --_ctx-h: var(--ejk-success-h);
    --_ctx-s: var(--ejk-success-s);
    --_ctx-l: var(--ejk-success-l);
    --_ctx: var(--ejk-success);
    --_ctx-text: var(--ejk-a11y-success-text);
    --_ctx-bg-bump: 0%;
    --_ctx-border-bump: 10%;
  }

  &[class*="warning"]:not(.outline) {
    --_ctx-h: var(--ejk-warning-h);
    --_ctx-s: var(--ejk-warning-s);
    --_ctx-l: var(--ejk-warning-l);
    --_ctx: var(--ejk-warning);
    --_ctx-text: var(--ejk-a11y-warning-text);
    --_ctx-bg-bump: 0%;
    --_ctx-border-bump: 20%;
  }

  &[class*="danger"]:not(.outline) {
    --_ctx-h: var(--ejk-danger-h);
    --_ctx-s: var(--ejk-danger-s);
    --_ctx-l: var(--ejk-danger-l);
    --_ctx: var(--ejk-danger);
    --_ctx-text: var(--ejk-a11y-danger-text);
    --_ctx-bg-bump: 20%;
    --_ctx-border-bump: 30%;
  }

  &:is([class*="info"], [class*="success"], [class*="warning"], [class*="danger"]):not(.outline) {
    background-color: hsl(var(--_ctx-h) var(--_ctx-s) var(--_ctx-l) / 0.5);
    border-color: var(--_ctx);

    &:hover {
      background-color: hsl(var(--_ctx-h) var(--_ctx-s) calc(var(--_ctx-l) + var(--_ctx-bg-bump)) / 1);
      border-color: hsl(var(--_ctx-h) var(--_ctx-s) calc(var(--_ctx-l) + var(--_ctx-border-bump)) / 1);
      color: var(--_ctx-text);
    }
  }

  

  &[class*="muted"]:not(.outline) {
    background-color: hsl(var(--ejk-muted-h) var(--ejk-muted-s) var(--ejk-muted-l) / 0.5);
    border-color: var(--ejk-muted);
    color: color-mix(in srgb, var(--ejk-text-muted), black 15%);

    &:hover {
      background-color: hsl(var(--ejk-muted-h) var(--ejk-muted-s) var(--ejk-muted-l) / 1);
      border-color: hsl(var(--ejk-muted-h) var(--ejk-muted-s) calc(var(--ejk-muted-l) + 20%) / 1);
      color: color-mix(in srgb, var(--ejk-text-muted), white 55%);
    }
  }

  

  &:active {
    transform: translate(0, 0);
  }
}