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

/* BUTTONS */

:root {

    /* BASE */

    --ecomm-button-base-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-base-disabled-border-color: transparent;
    --ecomm-button-base-disabled-background-color: transparent;

    /* NEUTRAL */

    --ecomm-button-neutral-color: var(--ecomm-color-primary-01);
    --ecomm-button-neutral-border-color: var(--ecomm-color-gray-01);
    --ecomm-button-neutral-background-color: var(--ecomm-color-white-01);
    --ecomm-button-neutral-color-hover: var(--ecomm-color-primary-01);
    --ecomm-button-neutral-border-color-hover: var(--ecomm-color-gray-01);
    --ecomm-button-neutral-background-color-hover: var(--ecomm-color-white-03);
    --ecomm-button-neutral-color-focus: var(--ecomm-color-primary-01);
    --ecomm-button-neutral-border-color-focus: var(--ecomm-color-gray-01);
    --ecomm-button-neutral-background-color-focus: var(--ecomm-color-white-03);
    --ecomm-button-neutral-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-neutral-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-neutral-disabled-background-color: var(--ecomm-color-white-01);

    /* BRAND */

    --ecomm-button-brand-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-brand-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-brand-disabled-background-color: var(--ecomm-color-white-06);

    /* OUTLINE BRAND */

    --ecomm-button-outline-brand-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-outline-brand-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-outline-brand-disabled-background-color: var(--ecomm-color-white-01);

    /* DESTRUCTIVE */

    --ecomm-button-destructive-color: var(--ecomm-color-white-01);
    --ecomm-button-destructive-border-color: var(--ecomm-color-destructive-01);
    --ecomm-button-destructive-background-color: var(--ecomm-color-destructive-01);
    --ecomm-button-destructive-color-hover: var(--ecomm-color-white-01);
    --ecomm-button-destructive-border-color-hover: var(--ecomm-color-destructive-02);
    --ecomm-button-destructive-background-color-hover: var(--ecomm-color-destructive-02);
    --ecomm-button-destructive-color-focus: var(--ecomm-color-white-01);
    --ecomm-button-destructive-border-color-focus: var(--ecomm-color-destructive-02);
    --ecomm-button-destructive-background-color-focus: var(--ecomm-color-destructive-02);
    --ecomm-button-destructive-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-destructive-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-destructive-disabled-background-color: var(--ecomm-color-white-06);

    /* DESTRUCTIVE TEXT */

    --ecomm-button-destructive-text-color: var(--ecomm-color-destructive-01);
    --ecomm-button-destructive-text-border-color: var(--ecomm-color-gray-01);
    --ecomm-button-destructive-text-background-color: var(--ecomm-color-white-01);
    --ecomm-button-destructive-text-color-hover: var(--ecomm-color-destructive-01);
    --ecomm-button-destructive-text-border-color-hover: var(--ecomm-color-gray-01);
    --ecomm-button-destructive-text-background-color-hover: var(--ecomm-color-white-03);
    --ecomm-button-destructive-text-color-focus: var(--ecomm-color-destructive-01);
    --ecomm-button-destructive-text-border-color-focus: var(--ecomm-color-gray-01);
    --ecomm-button-destructive-text-background-color-focus: var(--ecomm-color-white-03);
    --ecomm-button-destructive-text-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-destructive-text-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-destructive-text-disabled-background-color: var(--ecomm-color-white-01);

    /* SUCCESS */

    --ecomm-button-success-color: var(--ecomm-color-white-01);
    --ecomm-button-success-border-color: var(--ecomm-color-success-02);
    --ecomm-button-success-background-color: var(--ecomm-color-success-02);
    --ecomm-button-success-color-hover: var(--ecomm-color-white-01);
    --ecomm-button-success-border-color-hover: var(--ecomm-color-success-03);
    --ecomm-button-success-background-color-hover: var(--ecomm-color-success-03);
    --ecomm-button-success-color-focus: var(--ecomm-color-white-01);
    --ecomm-button-success-border-color-focus: var(--ecomm-color-success-03);
    --ecomm-button-success-background-color-focus: var(--ecomm-color-success-03);
    --ecomm-button-success-disabled-color: var(--ecomm-color-gray-04);
    --ecomm-button-success-disabled-border-color: var(--ecomm-color-white-06);
    --ecomm-button-success-disabled-background-color: var(--ecomm-color-white-06);

    /* BOX-SHADOW */

    --ecomm-button-box-shadow-focus:
        -2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-color-box-shadow-01);
}

.slds-button {
    transition:
        color var(--ecomm-transition-color),
        border-color var(--ecomm-transition-border-color),
        background-color var(--ecomm-transition-background-color),
        box-shadow var(--ecomm-transition-box-shadow);
}

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

a.slds-button,
button.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 {
    /* padding-top: var(--ecomm-button-padding-top); */
    /* padding-bottom: var(--ecomm-button-padding-bottom); */
    /* padding-left: var(--ecomm-button-padding-left); */
    /* padding-right: var(--ecomm-button-padding-right); */
    /* font-family: var(--ecomm-button-font-family); */
    /* font-style: var(--ecomm-button-font-style); */
    /* font-weight: var(--ecomm-button-font-weight); */
    /* text-transform: var(--ecomm-button-text-transform); */
    /* text-decoration: var(--ecomm-button-text-decoration); */
    /* font-size: var(--ecomm-button-font-size); */
    /* line-height: var(--ecomm-button-line-height); */
    line-height: 1.5rem; /* It's important for icons and buttons height */
    /* letter-spacing: var(--ecomm-button-letter-spacing); */
    /* border-radius: var(--ecomm-button-border-radius); */
}

a.slds-button:focus,
a.slds-button[disabled="false"]:focus,
button.slds-button:focus,
lightning-button[variant="base"] .slds-button:focus,
lightning-button[variant="neutral"] .slds-button:focus,
lightning-button[variant="brand"] .slds-button:focus,
lightning-button[variant="brand-outline"] .slds-button:focus,
lightning-button[variant="destructive"] .slds-button:focus,
lightning-button[variant="destructive-text"] .slds-button:focus,
lightning-button[variant="success"] .slds-button:focus {
    box-shadow: var(--ecomm-button-box-shadow-focus);
}

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

.slds-button.slds-button_neutral {
    padding-left: var(--ecomm-button-padding-left);
    padding-right: var(--ecomm-button-padding-right);
}

/* BUTTONS SMALL */

.slds-button.dxp-button-small {
    /* padding-top: var(--ecomm-button-small-padding-top); */
    /* padding-bottom: var(--ecomm-button-small-padding-bottom); */
    /* padding-left: var(--ecomm-button-small-padding-left); */
    /* padding-right: var(--ecomm-button-small-padding-right); */
    /* font-size: var(--ecomm-button-small-font-size); */
    line-height: 1.5rem;  /* It's important for icons and buttons height */
    /* border-radius: var(--ecomm-button-small-border-radius); */
}

.slds-button.slds-button_neutral.dxp-button-small {
    padding-left: var(--ecomm-button-small-padding-left);
    padding-right: var(--ecomm-button-small-padding-right);
}

/* BUTTONS LARGE */

.slds-button.dxp-button-large {
    /* padding-top: var(--ecomm-button-large-padding-top); */
    /* padding-bottom: var(--ecomm-button-large-padding-bottom); */
    /* padding-left: var(--ecomm-button-large-padding-left); */
    /* padding-right: var(--ecomm-button-large-padding-right); */
    /* font-size: var(--ecomm-button-large-font-size); */
    line-height: 1.5rem;  /* It's important for icons and buttons height */
    /* border-radius: var(--ecomm-button-large-border-radius); */
}

.slds-button.slds-button_neutral.dxp-button-large {
    padding-left: var(--ecomm-button-large-padding-left);
    padding-right: var(--ecomm-button-large-padding-right);
}

/* BUTTON: BASE */

a.slds-button,
a.slds-button[disabled="false"] {
    color: var(--ecomm-button-color-tertiary-text);
    border-color: var(--ecomm-button-color-tertiary-border);
    background-color: var(--ecomm-button-color-tertiary-background);
    cursor: pointer;
}

a.slds-button:hover,
a.slds-button[disabled="false"]:hover {
    color: var(--ecomm-button-color-tertiary-text-hover);
    border-color: var(--ecomm-button-color-tertiary-border-hover);
    background-color: var(--ecomm-button-color-tertiary-background-hover);
}

a.slds-button:focus,
a.slds-button:active,
a.slds-button[disabled="false"]:focus,
a.slds-button[disabled="false"]:active {
    color: var(--ecomm-button-color-tertiary-text-focus);
    border-color: var(--ecomm-button-color-tertiary-border-focus);
    background-color: var(--ecomm-button-color-tertiary-background-focus);
}

/* BUTTON: NEUTRAL */

.slds-button.slds-button_neutral,
a.slds-button.slds-button_neutral,
a.slds-button.slds-button_neutral[disabled="false"] {
    color: var(--ecomm-button-neutral-color);
    border-color: var(--ecomm-button-neutral-border-color);
    background-color: var(--ecomm-button-neutral-background-color);
}

.slds-button.slds-button_neutral:hover,
a.slds-button.slds-button_neutral:hover,
a.slds-button.slds-button_neutral[disabled="false"]:hover {
    color: var(--ecomm-button-neutral-color-hover);
    border-color: var(--ecomm-button-neutral-border-color-hover);
    background-color: var(--ecomm-button-neutral-background-color-hover);
}

.slds-button.slds-button_neutral:focus,
.slds-button.slds-button_neutral:active,
a.slds-button.slds-button_neutral:focus,
a.slds-button.slds-button_neutral:active,
a.slds-button.slds-button_neutral[disabled="false"]:focus,
a.slds-button.slds-button_neutral[disabled="false"]:active {
    color: var(--ecomm-button-neutral-color-focus);
    border-color: var(--ecomm-button-neutral-border-color-focus);
    background-color: var(--ecomm-button-neutral-background-color-focus);
}

/* BUTTON: BRAND */

a.slds-button.slds-button_brand,
a.slds-button.slds-button_brand[disabled="false"] {
    color: var(--ecomm-button-color-primary-text);
    border-color: var(--ecomm-button-color-primary-border);
    background-color: var(--ecomm-button-color-primary-background);
}

a.slds-button.slds-button_brand:hover,
a.slds-button.slds-button_brand[disabled="false"]:hover {
    color: var(--ecomm-button-color-primary-text-hover);
    border-color: var(--ecomm-button-color-primary-border-hover);
    background-color: var(--ecomm-button-color-primary-background-hover);
}

a.slds-button.slds-button_brand:focus,
a.slds-button.slds-button_brand:active,
a.slds-button.slds-button_brand[disabled="false"]:focus,
a.slds-button.slds-button_brand[disabled="false"]:active {
    color: var(--ecomm-button-color-primary-text-focus);
    border-color: var(--ecomm-button-color-primary-border-focus);
    background-color: var(--ecomm-button-color-primary-background-focus);
}

/* BUTTON: BRAND OUTLINE */

a.slds-button.slds-button_outline-brand,
a.slds-button.slds-button_outline-brand[disabled="false"] {
    color: var(--ecomm-button-color-secondary-text);
    border-color: var(--ecomm-button-color-secondary-border);
    background-color: var(--ecomm-button-color-secondary-background);
}

a.slds-button.slds-button_outline-brand:hover,
a.slds-button.slds-button_outline-brand[disabled="false"]:hover {
    color: var(--ecomm-button-color-secondary-text-hover);
    border-color: var(--ecomm-button-color-secondary-border-hover);
    background-color: var(--ecomm-button-color-secondary-background-hover);
}

a.slds-button.slds-button_outline-brand:focus,
a.slds-button.slds-button_outline-brand:active,
a.slds-button.slds-button_outline-brand[disabled="false"]:focus,
a.slds-button.slds-button_outline-brand[disabled="false"]:active {
    color: var(--ecomm-button-color-secondary-text-focus);
    border-color: var(--ecomm-button-color-secondary-border-focus);
    background-color: var(--ecomm-button-color-secondary-background-focus);
}

/* BUTTON: DESTRUCTIVE */

.slds-button.slds-button_destructive,
a.slds-button.slds-button_destructive,
a.slds-button.slds-button_destructive[disabled="false"] {
    color: var(--ecomm-button-destructive-color);
    border-color: var(--ecomm-button-destructive-border-color);
    background-color: var(--ecomm-button-destructive-background-color);
}

.slds-button.slds-button_destructive:hover,
a.slds-button.slds-button_destructive:hover,
a.slds-button.slds-button_destructive[disabled="false"]:hover {
    color: var(--ecomm-button-destructive-color-hover);
    border-color: var(--ecomm-button-destructive-border-color-hover);
    background-color: var(--ecomm-button-destructive-background-color-hover);
}

.slds-button.slds-button_destructive:focus,
.slds-button.slds-button_destructive:active,
a.slds-button.slds-button_destructive:focus,
a.slds-button.slds-button_destructive:active,
a.slds-button.slds-button_destructive[disabled="false"]:focus,
a.slds-button.slds-button_destructive[disabled="false"]:active {
    color: var(--ecomm-button-destructive-color-focus);
    border-color: var(--ecomm-button-destructive-border-color-focus);
    background-color: var(--ecomm-button-destructive-background-color-focus);
}

/* BUTTON: DESTRUCTIVE TEXT */

.slds-button.slds-button_text-destructive,
a.slds-button.slds-button_text-destructive,
a.slds-button.slds-button_text-destructive[disabled="false"] {
    color: var(--ecomm-button-destructive-text-color);
    border-color: var(--ecomm-button-destructive-text-border-color);
    background-color: var(--ecomm-button-destructive-text-background-color);
}

.slds-button.slds-button_text-destructive:hover,
a.slds-button.slds-button_text-destructive:hover,
a.slds-button.slds-button_text-destructive:hover[disabled="false"] {
    color: var(--ecomm-button-destructive-text-color-hover);
    border-color: var(--ecomm-button-destructive-text-border-color-hover);
    background-color: var(--ecomm-button-destructive-text-background-color-hover);
}

.slds-button.slds-button_text-destructive:focus,
.slds-button.slds-button_text-destructive:active,
a.slds-button.slds-button_text-destructive:focus,
a.slds-button.slds-button_text-destructive:active,
a.slds-button.slds-button_text-destructive[disabled="false"]:focus,
a.slds-button.slds-button_text-destructive[disabled="false"]:active {
    color: var(--ecomm-button-destructive-text-color-focus);
    border-color: var(--ecomm-button-destructive-text-border-color-focus);
    background-color: var(--ecomm-button-destructive-text-background-color-focus);
}

/* BUTTON: SUCCESS */

.slds-button.slds-button_success,
a.slds-button.slds-button_success,
a.slds-button.slds-button_success[disabled="false"] {
    color: var(--ecomm-button-success-color);
    border-color: var(--ecomm-button-success-border-color);
    background-color: var(--ecomm-button-success-background-color);
}

.slds-button.slds-button_success:hover,
a.slds-button.slds-button_success:hover,
a.slds-button.slds-button_success[disabled="false"]:hover {
    color: var(--ecomm-button-success-color-hover);
    border-color: var(--ecomm-button-success-border-color-hover);
    background-color: var(--ecomm-button-success-background-color-hover);
}

.slds-button.slds-button_success:focus,
.slds-button.slds-button_success:active,
a.slds-button.slds-button_success:focus,
a.slds-button.slds-button_success:active,
a.slds-button.slds-button_success[disabled="false"]:focus,
a.slds-button.slds-button_success[disabled="false"]:active {
    color: var(--ecomm-button-success-color-focus);
    border-color: var(--ecomm-button-success-border-color-focus);
    background-color: var(--ecomm-button-success-background-color-focus);
}

/* BUTTONS DISABLED */

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

.slds-button.slds-button_neutral:disabled,
a.slds-button.slds-button_neutral[disabled="true"] {
    color: var(--ecomm-button-neutral-disabled-color);
    border-color: var(--ecomm-button-neutral-disabled-border-color);
    background-color: var(--ecomm-button-neutral-disabled-background-color);
}

.slds-button.slds-button_brand:disabled,
a.slds-button.slds-button_brand[disabled="true"] {
    color: var(--ecomm-button-brand-disabled-color);
    border-color: var(--ecomm-button-brand-disabled-border-color);
    background-color: var(--ecomm-button-brand-disabled-background-color);
}

.slds-button.slds-button_outline-brand:disabled,
a.slds-button.slds-button_outline-brand[disabled="true"] {
    color: var(--ecomm-button-outline-brand-disabled-color);
    border-color: var(--ecomm-button-outline-brand-disabled-border-color);
    background-color: var(--ecomm-button-outline-brand-disabled-background-color);
}

.slds-button.slds-button_destructive:disabled,
a.slds-button.slds-button_destructive[disabled="true"] {
    color: var(--ecomm-button-destructive-disabled-color);
    border-color: var(--ecomm-button-destructive-disabled-border-color);
    background-color: var(--ecomm-button-destructive-disabled-background-color);
}

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

.slds-button.slds-button_success:disabled,
a.slds-button.slds-button_success[disabled="true"] {
    color: var(--ecomm-button-success-disabled-color);
    border-color: var(--ecomm-button-success-disabled-border-color);
    background-color: var(--ecomm-button-success-disabled-background-color);
}

/* BUTTON ICON */

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

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

.slds-button c-ecomm-icon:last-child:not(:first-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;
}