/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/button.css?{ versionKey }"/> */

/* BUTTONS */

.slds-button {
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
    box-shadow: none !important;
}

.slds-button + .slds-button {
    margin-left: 0;
}

.slds-button,
a.slds-button,
lightning-button[variant="base"] .slds-button,
lightning-button[variant="neutral"] .slds-button,
lightning-button[variant="brand"] .slds-button,
lightning-button[variant="brand-outline"] .slds-button,
lightning-button[variant="destructive"] .slds-button,
lightning-button[variant="destructive-text"] .slds-button,
lightning-button[variant="success"] .slds-button {
    /* Setting in 'Experience Builder' */
    /* font-family: var(--dxp-s-button-font-family, 'Inter'); */            /* Buttons -> Button Text -> Font Family */
    /* font-style: var(--dxp-s-button-font-style, normal); */               /* Buttons -> Button Text -> Font Style */
    /* font-weight: var(--dxp-s-button-font-weight, 600); */                /* Buttons -> Button Text -> Font Weight */
    /* text-transform: var(--dxp-s-button-text-transform, none); */         /* Buttons -> Button Text -> Text Case */
    /* line-height: var(--dxp-s-button-line-height, 1.5rem); */             /* Buttons -> Button Text -> Line Height (1–5) */
    /* letter-spacing: var(--dxp-s-button-letter-spacing, 0); */            /* Buttons -> Button Text -> Character Spacing (0–2,5 em) */
    /* padding-top: var(--dxp-s-button-padding-block-start, 0.6875rem); */  /* Buttons -> Standard Buttons -> Vertical Padding (0–10 rem) */
    /* padding-bottom: var(--dxp-s-button-padding-block-end, 0.6875rem); */ /* Buttons -> Standard Buttons -> Vertical Padding (0–10 rem) */
    /* padding-left: var(--dxp-s-button-padding-inline-start, 3rem); */     /* Buttons -> Standard Buttons -> Horizontal Padding (0,25–10 rem) */
    /* padding-right: var(--dxp-s-button-padding-inline-end, 3rem); */      /* Buttons -> Standard Buttons -> Horizontal Padding (0,25–10 rem) */
    /* font-size: var(--dxp-s-button-font-size, 1.125rem); */               /* Buttons -> Standard Buttons -> Font Size (0,25–10 rem) */
    /* border-radius: var(--dxp-s-button-radius-border, 48px); */           /* Buttons -> Standard Buttons -> Border Radius (0–150 px) */

    line-height: 1.5rem;
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
}

.slds-button.slds-button_neutral {
    padding-left: var(--dxp-s-button-spacing-inline-start, 3rem);
    padding-right: var(--dxp-s-button-spacing-inline-end, 3rem);
}

.slds-button:focus,
a.slds-button:focus {
    box-shadow: var(--ecomm-button-box-shadow-focus);
}

/* BUTTONS SMALL */

.dxp-button-small.slds-button {
    /* Setting in 'Experience Builder' */
    /* padding-top: var(--dxp-s-button-small-padding-block-start, 0.3125rem); */  /* Buttons -> Small Buttons -> Vertical Padding (0–10 rem) */
    /* padding-bottom: var(--dxp-s-button-small-padding-block-end, 0.3125rem); */ /* Buttons -> Small Buttons -> Vertical Padding (0–10 rem) */
    /* padding-left: var(--dxp-s-button-small-padding-inline-start, 1.5rem); */   /* Buttons -> Small Buttons -> Horizontal Padding (0,25–10 rem) */
    /* padding-right: var(--dxp-s-button-small-padding-inline-end, 1.5rem); */    /* Buttons -> Small Buttons -> Horizontal Padding (0,25–10 rem) */
    /* font-size: var(--dxp-s-button-small-font-size, 1rem); */                   /* Buttons -> Small Buttons -> Font Size (0,25–10 rem) */
    /* border-radius: var(--dxp-s-button-small-radius-border, 36px); */           /* Buttons -> Small Buttons -> Border Radius (0–150 px) */

    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    line-height: 1.5rem;
}

/* BUTTONS LARGE */

.dxp-button-large.slds-button {
    /* Setting in 'Experience Builder' */
    /* padding-top: var(--dxp-s-button-large-padding-block-start, 0.9375rem); */  /* Buttons -> Large Buttons -> Vertical Padding (0–10 rem) */
    /* padding-bottom: var(--dxp-s-button-large-padding-block-end, 0.9375rem); */ /* Buttons -> Large Buttons -> Vertical Padding (0–10 rem) */
    /* padding-left: var(--dxp-s-button-large-padding-inline-start, 3.5rem); */   /* Buttons -> Large Buttons -> Horizontal Padding (0,25–10 rem) */
    /* padding-right: var(--dxp-s-button-large-padding-inline-end, 3.5rem); */    /* Buttons -> Large Buttons -> Horizontal Padding (0,25–10 rem) */
    /* font-size: var(--dxp-s-button-large-font-size, 1.375rem); */               /* Buttons -> Large Buttons -> Font Size (0,25–10 rem) */
    /* border-radius: var(--dxp-s-button-large-radius-border, 56px); */           /* Buttons -> Large Buttons -> Border Radius (0–150 px) */

    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
    line-height: 1.5rem;
}

/* BUTTON: BASE */

a.slds-button[disabled="false"] {
    color: var(--sds-c-button-text-color, var(--dxp-s-button-color, var(--dxp-g-brand-1, #0176D3)));
    cursor: pointer;
}

a.slds-button[disabled="false"]:hover,
a.slds-button[disabled="false"]:focus,
a.slds-button[disabled="false"]:active {
    color: var(--sds-c-button-text-color-hover, var(--dxp-s-button-color-hover, var(--dxp-g-brand-1, #014486)));
    border-color: transparent;
    background-color: transparent;
}

.slds-button:active {
    border-color: transparent;
}

/* BUTTON: NEUTRAL */

a.slds-button.slds-button_neutral[disabled="false"] {
    border-color: var(--sds-c-button-neutral-color-border, var(--dxp-g-neutral-3, #AEAEAE));
    background-color: var(--sds-c-button-neutral-color-background, var(--dxp-g-root, #FFFFFF));
}

.slds-button.slds-button_neutral:hover,
.slds-button.slds-button_neutral:focus,
.slds-button.slds-button_neutral:active,
a.slds-button.slds-button_neutral[disabled="false"]:hover,
a.slds-button.slds-button_neutral[disabled="false"]:focus,
a.slds-button.slds-button_neutral[disabled="false"]:active {
    border-color: var(--sds-c-button-neutral-color-border-hover, var(--dxp-g-neutral-contrast-1, #AEAEAE));
    background-color: var(--sds-c-button-neutral-color-background-hover, var(--dxp-g-root-1, #F3F3F3));
}

/* BUTTON: BRAND */

a.slds-button.slds-button_brand[disabled="false"] {
    color: var(--sds-c-button-brand-text-color, var(--dxp-s-button-color-contrast, var(--dxp-g-brand-contrast, #FFFFFF)));
    border-color: var(--sds-c-button-brand-color-border, var(--dxp-s-button-color, var(--dxp-g-brand, #0176D3)));
    background-color: var(--sds-c-button-brand-color-background, var(--dxp-s-button-color, var(--dxp-g-brand, #0176D3)));
}

.slds-button.slds-button_brand:hover,
.slds-button.slds-button_brand:focus,
.slds-button.slds-button_brand:active,
a.slds-button.slds-button_brand[disabled="false"]:hover,
a.slds-button.slds-button_brand[disabled="false"]:focus,
a.slds-button.slds-button_brand[disabled="false"]:active {
    border-color: var(--sds-c-button-brand-color-border-hover, var(--dxp-s-button-color-hover, var(--dxp-g-brand-1, #014486)));
    background-color: var(--sds-c-button-brand-color-background-hover, var(--dxp-s-button-color-hover, var(--dxp-g-brand-1, #014486)));
}

/* BUTTON: BRAND OUTLINE */

a.slds-button.slds-button_outline-brand[disabled="false"] {
    border-color: var(--sds-c-button-outline-brand-color-border, var(--dxp-s-button-color, var(--dxp-g-brand, #0176D3)));
    background-color: var(--sds-c-button-outline-brand-color-background, var(--dxp-g-root, #FFFFFF));
}

.slds-button.slds-button_outline-brand:hover,
.slds-button.slds-button_outline-brand:focus,
.slds-button.slds-button_outline-brand:active,
a.slds-button.slds-button_outline-brand[disabled="false"]:hover,
a.slds-button.slds-button_outline-brand[disabled="false"]:focus,
a.slds-button.slds-button_outline-brand[disabled="false"]:active {
    color: var(--ecomm-color-white, #FFFFFF);
    border-color: var(--ecomm-color-green-hover, #238963);
    background-color: var(--ecomm-color-green-hover, #238963);
}

.slds-button.slds-button_outline-brand:active {
    background-color: var(--dxp-s-secondary-button-color-hover) !important;
    border-color: var(--dxp-s-secondary-button-color-hover) !important;
    color: var(--dxp-s-secondary-button-text-color-hover) !important;
}

/* BUTTON: DESTRUCTIVE */

a.slds-button.slds-button_destructive[disabled="false"] {
    color: var(--sds-c-button-destructive-text-color, var(--dxp-g-destructive-contrast, #FFFFFF));
    border-color: var(--sds-c-button-destructive-color-border, var(--dxp-g-destructive, #BA0517));
    background-color: var(--sds-c-button-destructive-color-background, var(--dxp-g-destructive, #BA0517));
}

.slds-button.slds-button_destructive:hover,
.slds-button.slds-button_destructive:focus,
.slds-button.slds-button_destructive:active,
a.slds-button.slds-button_destructive[disabled="false"]:hover,
a.slds-button.slds-button_destructive[disabled="false"]:focus,
a.slds-button.slds-button_destructive[disabled="false"]:active {
    color: var(--slds-c-button-destructive-text-color, var(--sds-c-button-destructive-text-color, var(--slds-g-color-neutral-base-100, #FFFFFF)));
    border-color: var(--sds-c-button-destructive-color-border-hover, var(--dxp-g-destructive-1, #BA0517)); 
    background-color: var(--sds-c-button-destructive-color-background-hover, var(--dxp-g-destructive-1, #BA0517));
}

/* BUTTON: DESTRUCTIVE TEXT */

a.slds-button.slds-button_text-destructive[disabled="false"] {
    color: var(--sds-c-button-text-destructive-text-color, var(--dxp-g-destructive, #EA001E));
    border-color: var(--sds-c-button-text-destructive-color-border, var(--dxp-g-neutral-3, #AEAEAE));
    background-color: var(--sds-c-button-text-destructive-color-background, var(--dxp-g-root, #FFFFFF));
}

.slds-button.slds-button_text-destructive:hover,
.slds-button.slds-button_text-destructive:focus,
.slds-button.slds-button_text-destructive:active,
a.slds-button.slds-button_text-destructive[disabled="false"]:hover,
a.slds-button.slds-button_text-destructive[disabled="false"]:focus,
a.slds-button.slds-button_text-destructive[disabled="false"]:active {
    border-color: var(--sds-c-button-text-destructive-color-border-hover, var(--dxp-g-neutral-contrast-1, #AEAEAE));
    background-color: var(--sds-c-button-text-destructive-color-background-hover, var(--dxp-g-root-1, #F3F3F3));
}

/* BUTTON: SUCCESS */

a.slds-button.slds-button_success[disabled="false"] {
    color: var(--sds-c-button-success-text-color, var(--dxp-g-success-contrast, #181818));
    border-color: var(--sds-c-button-success-color-border, var(--dxp-g-success, #91DB8B));
    background-color: var(--sds-c-button-success-color-background, var(--dxp-g-success, #45C65A));
}

.slds-button.slds-button_success:hover,
.slds-button.slds-button_success:focus,
.slds-button.slds-button_success:active,
a.slds-button.slds-button_success[disabled="false"]:hover,
a.slds-button.slds-button_success[disabled="false"]:focus,
a.slds-button.slds-button_success[disabled="false"]:active {
    color: var(--sds-c-button-success-text-color, var(--dxp-g-success-contrast, #181818));
    border-color: var(--sds-c-button-success-color-border-hover, var(--dxp-g-success-1, #2E844A));
    background-color: var(--sds-c-button-success-color-background-hover, var(--dxp-g-success-1, #2E844A));
}

/* BUTTONS DISABLED */

lightning-button[style*="pointer-events: none;"] {
    pointer-events: unset !important;
}

.slds-button:disabled,
.slds-button[disabled="true"] {
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-white, #FFFFFF);
    background-color: var(--ecomm-color-white, #FFFFFF);
}

.slds-button.slds-button_neutral:disabled,
.slds-button.slds-button_neutral[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-white, #FFFFFF);
}

.slds-button.slds-button_brand:disabled,
.slds-button.slds-button_brand[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
}

.slds-button.slds-button_outline-brand:disabled,
.slds-button.slds-button_outline-brand[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-white, #FFFFFF);
}

.slds-button.slds-button_destructive:disabled,
.slds-button.slds-button_destructive[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
}

.slds-button.slds-button_text-destructive:disabled,
.slds-button.slds-button_text-destructive[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-white, #FFFFFF);
}

.slds-button.slds-button_success:disabled,
.slds-button.slds-button_success[disabled="true"] {
    color: var(--ecomm-color-button-text-disabled, #BBBBBB);
    border-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
    background-color: var(--ecomm-color-button-border-disabled, #E1E1E1);
}

/* BUTTON ICON */

.slds-button c-ecomm-icon {
    --ecomm-icon-width: 1.25rem;
}

.slds-button c-ecomm-icon:first-child {
    margin-right: 0.5rem;
}

.slds-button c-ecomm-icon:last-child {
    margin-left: 0.5rem;
}

.dxp-button-small.slds-button c-ecomm-icon {
    --ecomm-icon-width: 1rem;
}

.dxp-button-large.slds-button c-ecomm-icon {
    --ecomm-icon-width: 1.5rem;
}