/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

button {
    --width: auto;
    --spacing-x: var(--scl-spacing-24);
    --spacing-x-icon-only: var(--scl-spacing-8);
    --min-height: var(--scl-spacing-40);
    --radius: var(--scl-radius-8);
    --transition: all var(--scl-motion-duration-fast) var(--scl-motion-easing-standard);
    --box-shadow-focus: 0 0 0 var(--scl-spacing-2) var(--scl-color-focus);
    --font-weight: var(--scl-font-weight-bold);
    --font-size: var(--scl-font-size-16);
    --line-height: var(--scl-font-line-height-150);
    --spacing-icon-x: var(--scl-spacing-8);
    --vertical-align: middle;

    /* size: small */
    --font-size-small: var(--scl-font-size-12);
    --line-height-small: var(--scl-font-line-height-133);
    --min-height-small: var(--scl-spacing-32);

    /* variant: primary */
    --radius-primary: var(--radius);
    --background-primary: var(--scl-color-primary);
    --background-primary-hover: var(--scl-color-primary-hover);
    --background-primary-active: var(--scl-color-primary-active);
    --background-primary-disabled: var(--scl-color-background-disabled);
    --color-primary: var(--scl-color-white);
    --color-primary-disabled: var(--scl-color-grey-40);

    /* variant: secondary */
    --radius-secondary: var(--radius);
    --border-width-secondary: var(--scl-spacing-1);
    --background-secondary: transparent;
    --color-secondary: var(--scl-color-text-standard);
    --color-secondary-hover: var(--scl-color-primary-hover);
    --color-secondary-active: var(--scl-color-primary-active);
    --color-secondary-disabled: var(--scl-color-background-disabled);
}

.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 0;
    outline: none;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    word-spacing: inherit;
    letter-spacing: inherit;
    justify-content: center;
    text-decoration: none;
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: var(--min-height);
    width: var(--width);
    padding-left: var(--spacing-x);
    padding-right: var(--spacing-x);
    vertical-align: var(--vertical-align);
    transition: var(--transition);
}

.button:not(.button--disabled):focus {
    box-shadow: var(--box-shadow-focus);
}

.button.button--icon-before ::slotted(*) {
    margin-right: var(--spacing-icon-x);
}

.button.button--icon-after ::slotted(*) {
    margin-left: var(--spacing-icon-x);
}

.button:after {
    top: 0;
    left: 0;
    width: 100%;
    border: var(--telekom-spacing-unit-x025) solid transparent;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    border-radius: var(--radius);
}

.button--size-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    min-height: var(--min-height-small);
}

.button--icon-only {
    padding-left: var(--spacing-x-icon-only);
    padding-right: var(--spacing-x-icon-only);
}

.button--disabled {
    cursor: not-allowed;
}

/* Variants */

.button--variant-primary {
    text-align: center;
    border-radius: var(--radius);
    background: var(--background-primary);
    color: var(--color-primary);
}
.button--variant-primary:not(.button--disabled):hover {
    background: var(--background-primary-hover);
}
.button--variant-primary:not(.button--disabled):active {
    background: var(--background-primary-active);
}

.button--disabled.button--variant-primary {
    background: var(--background-primary-disabled);
    color: var(--color-primary-disabled);
}

.button--variant-secondary {
    background: var(--background-secondary);
    text-align: center;
    border-radius: var(--radius-secondary);
    border: var(--border-width-secondary) solid currentColor;
    color: var(--color-secondary);
    background-color: var(--background-secondary);
    border-color: var(--border-secondary);
}
.button--variant-secondary:not(.button--disabled):hover {
    color: var(--color-secondary-hover);
    background-color: var(--background-secondary-hover);
    border-color: var(--border-secondary-hover);
}
.button--variant-secondary:not(.button--disabled):active {
    color: var(--color-secondary-active);
    background-color: var(--background-secondary-active);
    border-color: var(--border-secondary-active);
}
.button--disabled.button--variant-secondary {
    color: var(--color-secondary-disabled);
    background-color: var(--background-secondary-disabled);
}

.button--variant-ghost {
    background: transparent;
    text-align: center;
    border-radius: var(--radius-ghost);
    border: var(--border-width-ghost) solid transparent;
    color: var(--color-ghost);
    padding-left: var(--spacing-x-ghost);
    padding-right: var(--spacing-x-ghost);
}
.button--variant-ghost:not(.button--disabled):hover {
    color: var(--color-ghost-hover);
    background-color: var(--background-ghost-hover);
}
.button--variant-ghost:not(.button--disabled):active {
    color: var(--color-ghost-active);
    background-color: var(--background-ghost-active);
}
.button--disabled.button--variant-ghost {
    color: var(--color-ghost-disabled);
}