button,
html [type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: none !important;
}

button:focus,
.btn:focus,
.btn.focus {
    outline: none !important;
    box-shadow: none;
}

.btn-handler {
    display: var(--terra-button-btn-handler-display, inline-block);
    margin: var(--terra-button-btn-handler-margin);
    position: relative;

    &.disabled {
        %disabled-state {
            background-color: var(--color-structure-3);
            color: var(--color-structure-7);
            cursor: not-allowed;
            pointer-events: none;
        }

        cursor: not-allowed;

        .btn {
            @extend %disabled-state;

            &:hover,
            &:active,
            &:focus,
            &.active {
                @extend %disabled-state;
            }

            &.btn-link {
                background-color: transparent;
                color: var(--color-structure-4);
                font-weight: var(--font-weight-3);

                &:hover {
                    background-color: transparent;
                    color: var(--color-structure-4);

                    &:active,
                    &.active {
                        background-color: transparent;
                        color: var(--color-structure-4);
                    }
                }
            }
        }
    }

    .flag {
        position: absolute;
        right: 0;
        top: 0;
        overflow: hidden;
        width: 15px;
        height: 15px;
        border-top-right-radius: 0.2rem;
        cursor: pointer;

        &.disabled {
            cursor: not-allowed;
        }

        span {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--color-structure-0);
            text-align: center;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            width: 20px;
            display: block;
            position: absolute;
            top: -2px;
            right: -7px;
            cursor: pointer;
            background: var(--color-accent);
            border-top: 10px solid var(--color-accent);

            &.disabled {
                background: var(--color-accent-light);
                border-top: 10px solid var(--color-accent-light);
                cursor: not-allowed;
            }
        }
    }
}

.btn {
    flex-direction: var(--terra-button-btn-handler-btn-flex-direction, inherit);
    align-items: var(--terra-button-btn-handler-btn-align-items, inherit);
    display: var(--terra-button-btn-handler-btn-display, inline-block);

    height: var(--btn-height, var(--height-md));
    line-height: var(--btn-line-height, var(--height-md));
    padding: var(--btn-padding, (0 var(--space-md)));
    background-color: var(--color-structure-9);
    color: var(--color-structure-0);
    font-size: var(--font-size-3);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    border-radius: var(--border-radius);
    border-color: transparent;
    transition: height var(--transition-lg), line-height var(--transition-lg), padding var(--transition-lg),
        background-color var(--transition-sm);

    &:hover,
    &:focus:not(.node) {
        background-color: var(--color-structure-11);
        background-clip: padding-box;

        &:active,
        &.active {
            background-color: var(--color-structure-9);
            color: var(--color-structure-0);
            background-clip: padding-box;
        }
    }

    &.highlighted:not(:hover):not(focus):not(:active) {
        background-color: var(--color-group-navigation);
        border-bottom: var(--color-group-navigation);
        color: var(--color-structure-0);

        @keyframes highlighted {
            100% {
                background-color: var(--function-group-color-highlighted, var(--color-group-active));
                border-bottom: var(--function-group-color-highlighted, var(--color-group-active));
            }
        }
        animation: highlighted 1500ms ease-in-out 0ms infinite alternate;
    }

    span {
        font-size: 20px;
        position: relative;
        top: 4px;

        &.icon_dist_top {
            line-height: 0;
        }
    }

    &.btn-lg {
        // line-height: ensure even-numbered height of button next to large input
        height: var(--height-lg);
        line-height: var(--height-lg);
        padding: var(--btn-lg-padding, (0 var(--space-md)));
        font-size: var(--font-size-5);

        span {
            top: 4px;
            font-size: var(--font-size-6);
        }
    }

    &.btn-sm {
        // line-height: ensure proper height of button next to small input
        height: var(--height-sm);
        line-height: var(--height-sm);
        padding: var(--btn-sm-padding, (0 var(--space-md)));
        font-size: var(--font-size-1);

        span {
            top: 3px;
            font-size: var(--font-size-5);
        }
    }

    &.activated {
        background-color: var(--color-active) !important;
        color: var(--color-structure-0) !important;
    }

    &.btn-link {
        background-color: transparent;
        color: var(--color-structure-9);
        font-weight: var(--font-weight-3);

        &:hover,
        &:focus {
            background-color: transparent;
            color: var(--color-active);

            &:active,
            &.active {
                background-color: transparent;
                color: var(--color-structure-9);
            }
        }

        &.btn-primary {
            background-color: transparent;
            color: var(--color-active);

            &:hover,
            &:focus {
                background-color: transparent;
                color: var(--color-active-dark);

                &:active,
                &.active {
                    background-color: transparent;
                    color: var(--color-active);
                }
            }
        }

        &.btn-secondary {
            background-color: transparent;
            color: var(--color-alert);

            &:hover,
            &:focus {
                background-color: transparent;
                color: var(--color-alert-dark);

                &:active,
                &.active {
                    background-color: transparent;
                    color: var(--color-alert);
                }
            }
        }

        &.btn-tertiary {
            background-color: transparent;
            color: var(--color-add);

            &:hover,
            &:focus {
                background-color: transparent;
                color: var(--color-add-dark);

                &:active,
                &.active {
                    background-color: transparent;
                    color: var(--color-add);
                }
            }
        }
    }
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}

:host-context(.btn-block) {
    .btn,
    .btn-handler {
        display: block;
        float: none;
        max-width: 100%;
        width: 100%;
    }
}

// space between multiple buttons
:host-context(*) {
    &:not(:last-child) .btn-handler {
        margin-right: 4px;
    }
}
:host-context(.btn-toolbar) {
    &:not(:last-child) .btn-handler {
        margin-right: 0;
    }
}

////////////// Button Group (Horizontal) //////////////

:host-context(.btn-group) {
    &:first-child {
        margin-left: 0;

        &:not(:last-child) > .btn-handler > .btn,
        &:not(:last-child) > .btn-handler > .flag {
            border-radius: var(--border-radius) 0 0 var(--border-radius);
        }
    }

    &:not(:first-child):not(:last-child) > .btn-handler > .btn,
    &:not(:first-child):not(:last-child) > .btn-handler > .flag {
        border-radius: 0;
    }

    &:last-child {
        margin-left: 0;

        &:not(:first-child) > .btn-handler > .btn,
        &:not(:first-child) > .btn-handler > .flag {
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }
    }

    &:not(:last-child) .btn-handler {
        margin-right: 1px;
    }
}

////////////// Button Group Vertical & Menu //////////////

:host-context(.btn-group-vertical, .btn-group-menu),
.btn-group-menu {
    .btn,
    .btn-handler {
        display: block;
        float: none;
        max-width: 100%;
        width: 100%;
        text-align: left;
        margin-right: 0;
    }

    &:first-child:not(:last-child) .btn {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin: 0 0 1px 0;
    }

    &:not(:first-child):not(:last-child) .btn {
        border-radius: 0;
        margin: 1px 0;
    }

    &:last-child:not(:first-child) .btn {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        margin: 1px 0 0 0;
    }

    &:last-child:not(:first-child) .flag {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }

    &:not(:first-child):not(:last-child) .flag {
        border-radius: 0;
    }

    &:first-child:not(:last-child) .flag {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}

:host-context(.btn-group-menu),
.btn-group-menu {
    .btn {
        padding: 0 18px 0 9px !important;
        border-radius: var(--border-radius) !important;
        margin: 1px 0;

        .icon-right {
            margin-top: 8px;
            position: absolute !important;
            right: 0;
            top: initial !important;
        }
    }

    .btn-divider,
    .btn-divider:hover,
    .btn-divider:active {
        background-color: transparent !important;
        margin-bottom: 3px !important;
        margin-top: 3px !important;
        cursor: default;
        height: 1px;
    }

    &:first-child:not(:last-child),
    .btn-handler:first-child:not(:last-child) {
        .btn {
            margin-top: 4px !important;
        }
    }
}

:host-context(terra-toggle) {
    .btn {
        --button-background-color-group-add: var(--color-group-navigation);
        --button-text-color-group-add: var(--color-structure-0);
        --button-border-bottom-group-add: 0;

        --button-background-color-group-active: var(--color-group-navigation);
        --button-text-color-group-active: var(--color-structure-0);
        --button-border-bottom-group-active: 0;

        --button-background-color-group-alert: var(--color-group-navigation);
        --button-text-color-group-alert: var(--color-structure-0);
        --button-border-bottom-group-alert: 0;

        --button-background-color-group-action: var(--color-group-navigation);
        --button-text-color-group-action: var(--color-structure-0);
        --button-border-bottom-group-action: 0;

        --button-background-color-group-warning: var(--color-group-navigation);
        --button-text-color-group-warning: var(--color-structure-0);
        --button-border-bottom-group-warning: 0;

        --button-background-color-group-info: var(--color-group-navigation);
        --button-text-color-group-info: var(--color-structure-0);
        --button-border-bottom-group-info: 0;

        --button-background-color-group-transfer: var(--color-group-navigation);
        --button-text-color-group-transfer: var(--color-structure-0);
        --button-border-bottom-group-transfer: 0;

        --button-background-color-group-navigation: var(--color-group-navigation);
        --button-text-color-group-navigation: var(--color-structure-0);
        --button-border-bottom-group-navigation: 0;
    }
}