Connected.Components/Styles/components/_button.scss

@import '../abstracts/variables';

.button-root {
    color: inherit;
    border: 0;
    cursor: pointer;
    margin: 0;
    display: inline-flex;
    outline: 0;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    -moz-appearance: none;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    &::-moz-focus-inner {
        border-style: none;
    }

    &:disabled {
        color: var(--palette-action-disabled) !important;
        cursor: default;
        pointer-events: none;
    }
}

.button {
    padding: 6px 16px;
    font-family: var(--typography-button-family);
    font-size: var(--typography-button-size);
    font-weight: var(--typography-button-weight);
    line-height: var(--typography-button-lineheight);
    letter-spacing: var(--typography-button-letterspacing);
    text-transform: var(--typography-button-text-transform);
    min-width: 64px;
    box-sizing: border-box;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: var(--default-borderradius);
    color: var(--palette-text-primary);

    &:hover, &:focus-visible {
        background-color: var(--palette-action-default-hover);
    }
}

.button-label {
    width: 100%;
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
}

.button-text {
    padding: 6px 8px;

    &.button-text-inherit {
        color: inherit;
    }

    @each $color in $palette-colors {
        &.button-text-#{$color} {
            color: var(--palette-#{$color});

            &:hover, &:focus-visible {
                background-color: var(--palette-#{$color}-hover);
            }
        }
    }
}

.button-outlined {
    color: var(--palette-text-primary);
    border: 1px solid var(--palette-text-primary);
    padding: 5px 15px;

    &.button-outlined-inherit {
        color: inherit;
        border-color: currentColor;
    }

    &.icon-button {
        padding: 5px;
    }

    &:hover, &:focus-visible {
        background-color: var(--palette-action-default-hover);
    }

    @each $color in $palette-colors {
        &.button-outlined-#{$color} {
            color: var(--palette-#{$color});
            border: 1px solid var(--palette-#{$color});

            &:hover, &:focus-visible {
                border: 1px solid var(--palette-#{$color});
                background-color: var(--palette-#{$color}-hover);
            }
        }
    }

    &:disabled {
        border: 1px solid var(--palette-action-disabled-background);
    }
}

.button-filled {
    color: var(--palette-text-primary);
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
    background-color: var(--palette-action-default-hover);

    &.icon-button {
        padding: 6px;
    }

    &:hover, &:focus-visible {
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
        background-color: var(--palette-action-disabled-background);
    }

    &:active {
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0,0,0,.12);
    }


    &:disabled {
        color: var(--palette-action-disabled);
        box-shadow: none;
        background-color: var(--palette-action-disabled-background) !important;
    }

    @each $color in $palette-colors {
        &.button-filled-#{$color} {
            color: var(--palette-#{$color}-text);
            background-color: var(--palette-#{$color});

            &:hover, &:focus-visible {
                background-color: var(--palette-#{$color}-darken);
            }
        }
    }
}

.button-disable-elevation {
    box-shadow: none;

    &:hover {
        box-shadow: none;
    }

    &:active {
        box-shadow: none;
    }

    &.focus-visible {
        box-shadow: none;
    }

    &:disabled {
        box-shadow: none;
    }
}


.button-color-inherit {
    color: inherit;
    border-color: currentColor;
}

.button-text-size-small {
    padding: 4px 5px;
    font-size: 0.8125rem;
}

.button-text-size-large {
    padding: 8px 11px;
    font-size: 0.9375rem;
}

.button-outlined-size-small {
    padding: 3px 9px;
    font-size: 0.8125rem;

    &.icon-button {
        padding: 4px;
    }
}

.button-outlined-size-large {
    padding: 7px 21px;
    font-size: 0.9375rem;

    &.icon-button {
        padding: 4px;
    }
}

.button-filled-size-small {
    padding: 4px 10px;
    font-size: 0.8125rem;

    &.icon-button {
        padding: 5px;
    }
}

.button-filled-size-large {
    padding: 8px 22px;
    font-size: 0.9375rem;

    &.icon-button {
        padding: 5px;
    }
}

.button-full-width {
    width: 100%;
}

.button-label {
    .button-icon-start {
        display: inherit;
        margin-left: -4px;
        margin-right: 8px;
        margin-inline-start: -4px;
        margin-inline-end: 8px;

        &.button-icon-size-small {
            margin-left: -2px;
            margin-inline-start: -2px;
            margin-inline-end: 8px;
        }
    }

    .button-icon-end {
        display: inherit;
        margin-left: 8px;
        margin-right: -4px;
        margin-inline-start: 8px;
        margin-inline-end: -4px;

        &.button-icon-size-small {
            margin-right: -2px;
            margin-inline-end: -2px;
            margin-inline-start: 8px;
        }
    }
}





.button-icon-size-small > *:first-child {
    font-size: 18px;
}

.button-icon-size-medium > *:first-child {
    font-size: 20px;
}

.button-icon-size-large > *:first-child {
    font-size: 22px;
}