@import "dxHelpers/reset";

:host {
    width: min-content;
    font-size: inherit;

    --dx-c-button-background-color: transparent;
    --dx-c-button-primary-color: var(--dx-g-button-primary-color);
    --dx-c-button-secondary-color: var(--dx-g-button-secondary-color);
    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
    --dx-c-button-secondary-color-hover: var(
        --dx-g-button-secondary-color-hover
    );
    --dx-c-button-inline-color: var(--dx-g-button-inline-color);
    --dx-c-button-inline-color-hover: var(--dx-g-button-inline-color-hover);
    --dx-c-button-justify-content: center;
    --dx-c-button-opacity: 1;
    --dx-c-button-font-size: var(--dx-g-text-sm);
    --dx-c-button-font-weight: var(--dx-g-font-normal);
    --dx-c-button-line-height: inherit;
    --dx-c-button-letter-spacing: inherit;
    --dx-c-button-display: flex;
}

.button {
    background-color: var(--dx-c-button-background-color);
    opacity: var(--dx-c-button-opacity);
    width: inherit;
    display: var(--dx-c-button-display);
    align-items: center;
    justify-content: var(--dx-c-button-justify-content);
    user-select: none;
    white-space: nowrap;
    font-size: var(--dx-c-button-font-size);
    transition: var(--dx-g-transition-hue-1x);
    padding: var(--dx-c-button-vertical-spacing, 0)
        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
    border-radius: var(--dx-g-spacing-xs);
    font-weight: var(--dx-c-button-font-weight);
    line-height: var(--dx-c-button-line-height);
    letter-spacing: var(--dx-c-button-letter-spacing);
}

.button:focus {
    opacity: 1;
}

.button:focus:not(:focus-visible) {
    outline: none;
}

.button.variant_inline-inherit {
    font-size: inherit;
    text-transform: inherit;
    user-select: inherit;
    white-space: normal;
}

.button dx-icon {
    display: inline;
    vertical-align: var(--dx-c-button-icon-vertical-align, unset);

    --dx-c-icon-color: var(--dx-g-button-icon-color, currentcolor);
}

.button.variant_inline dx-icon,
.button.variant_inline-inherit dx-icon,
.button.variant_icon-only dx-icon {
    display: inline-block;
    vertical-align: var(--dx-c-button-icon-vertical-align, 0.1em);
}

.button > span {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    vertical-align: var(--dx-c-button-span-vertical-align, unset);
}

.button:not(.variant_inline-inherit).font-display {
    font-family: var(--dx-g-font-display);
}

.button.font-sans {
    font-family: var(--dx-g-font-sans);
}

.button.icon-right:not(.slot-empty) > *:nth-child(2) {
    margin-left: var(--dx-g-spacing-sm);
}

.button.icon-left:not(.slot-empty) > *:nth-child(2) {
    margin-right: var(--dx-g-spacing-sm);
}

.button.style-icon.slot-empty {
    padding: 0;
}

.icon-right {
    flex-direction: row;
}

.icon-left {
    flex-direction: row-reverse;
}

/* sizes */

.button.size-large {
    height: var(--dx-g-spacing-3xl);
}

.button.size-large.style-icon.slot-empty {
    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
}

.button.size-small {
    height: var(--dx-g-spacing-xl);
}

.button.size-small.style-icon.slot-empty {
    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
}

.button.size-hero {
    font-size: var(--dx-g-text-lg);
    height: 52px;
}

.button.size-hero.style-icon.slot-empty {
    width: var(--dx-c-slot-empty-width, 52px);
}

/* primary */

.button.variant_primary {
    color: white;
    background: var(--dx-c-button-primary-color);
    border: 1px solid var(--dx-c-button-primary-color);
}

.button.variant_primary:hover,
:host([aria-expanded="true"]) .button.variant_primary {
    background: var(--dx-c-button-primary-color-hover);
    border-color: var(--dx-c-button-primary-color-hover);
}

/* secondary / quaternary */

.button.variant_secondary {
    background: var(--dx-c-button-background-color);
}

.button.variant_quaternary {
    background: white;
}

.button.variant_secondary,
.button.variant_quaternary {
    color: var(--dx-c-button-secondary-color);
    border: 1px solid var(--dx-c-button-secondary-color);
}

.button.variant_secondary:hover,
.button.variant_quaternary:hover,
:host([aria-expanded="true"]) .button.variant_secondary,
:host([aria-expanded="true"]) .button.variant_quaternary {
    background: var(--dx-c-button-secondary-color-hover);
}

/* text primary */

.button.variant_tertiary,
.button.variant_inline,
.button.variant_inline-inherit {
    color: var(--dx-c-button-inline-color);
    border: 1px solid transparent;
}

.button.variant_inline.light-text {
    color: white;
}

.button.variant_tertiary:hover,
:host([aria-expanded="true"]) .button.variant_tertiary {
    background: var(--dx-c-button-secondary-color-hover);
    border-color: var(--dx-c-button-secondary-color-hover);
}

/* inline */
.button.variant_inline,
.button.variant_inline-inherit {
    display: inline;
    padding: 0;
    height: unset; /* please leave this here, actually is having an effect */
    width: unset; /* please leave this here, actually is having an effect */
}

.button.variant_inline:hover,
.button.variant_inline-inherit:hover,
:host([aria-expanded="true"])
    :is(.button.variant_inline, .button.variant_inline-inherit) {
    color: var(--dx-c-button-inline-color-hover);
}

.button.state-disabled {
    pointer-events: none;
}

/* custom and icon-only */
.button.variant_icon-only {
    padding: 0;
    height: unset;
    width: unset;
}

.button.variant_custom,
.button.variant_icon-only,
.button.variant_custom:hover.state-disabled,
.button.variant_icon-only:hover.state-disabled {
    color: var(--dx-c-button-custom-color);
    background: var(--dx-c-button-custom-background);
    border: 1px solid var(--dx-c-button-custom-border);
}

.button.variant_custom:hover,
.button.variant_icon-only:hover,
:host([aria-expanded="true"]) .button.variant_custom,
:host([aria-expanded="true"]) .button.variant_icon-only {
    color: var(--dx-c-button-custom-color-hover);
    background: var(--dx-c-button-custom-background-hover);
    border-color: var(--dx-c-button-custom-border-hover);
}