.btn {
    &.mod-append,
    &.mod-prepend {
        gap: 20px;
        line-height: $button-height - $button-border-width;
        border: $button-border-width solid var(--grey-40);

        &:focus {
            border-color: var(--digital-blue-60);

            .btn-append,
            .btn-prepend {
                border-color: var(--digital-blue-60);
            }
        }

        &:hover {
            border-color: var(--digital-blue-100);

            .btn-append,
            .btn-prepend {
                border-color: var(--digital-blue-100);
            }
        }

        &.mod-small {
            gap: 12px;

            .btn-append,
            .btn-prepend {
                height: $button-small-height - $button-border-width;
                line-height: $button-small-height - $button-border-width;
            }
        }

        .btn-append,
        .btn-prepend {
            display: inline-flex;
            align-items: center;
            height: $button-height - $button-border-width;
            padding: 0 12px;
            vertical-align: top; // Fix for Edge, otherwise, button text will be misaligned

            &.mod-icon {
                padding: 8px;
                fill: var(--grey-100);
            }

            .icon {
                display: inline-flex;
                fill: var(--grey-100);
            }
        }

        &.dropdown-toggle {
            .dropdown-toggle-arrow {
                position: static;
                display: inline-block;
            }
        }

        &.mod-large {
            line-height: $button-large-height - $button-border-width;

            .btn-append,
            .btn-prepend {
                height: $button-large-height - $button-border-width;
            }
        }

        &.mod-on-hover:not(:hover) {
            padding: 0 $button-padding-x 0 $button-padding-x;

            .btn-append,
            .btn-prepend {
                display: none;
            }
        }

        &:hover {
            &.mod-icon {
                padding: 8px;
                fill: var(--digital-blue-80);
            }

            .icon {
                fill: var(--digital-blue-80);
            }
        }
    }

    &.mod-append {
        padding: 0 0 0 $button-padding-x;

        .btn-append {
            border-left: $button-border-width solid var(--grey-40);
        }
    }

    &.mod-prepend {
        padding: 0 $button-padding-x 0 0;

        .btn-prepend {
            border-right: $button-border-width solid var(--grey-40);
        }
    }
}