.fhi-btn-group {
    background-color: $fhi-core-white;
    border-radius: #{$fhi-core-px * 22};
    box-shadow: 0 0 0 $fhi-core-px $fhi-core-grey-1;

    &__btn {
        --bs-btn-border-radius: #{$fhi-core-px * 24};
        --bs-btn-active-border-color: #{$fhi-core-white};
        --bs-btn-disabled-border-color: transparent;

        border: ($fhi-core-px * 2) solid transparent;
        border-radius: var(--bs-btn-border-radius) !important;
        margin-left: 0 !important;
        padding-right: $fhi-core-space-3;
        padding-left: $fhi-core-space-3;
        text-align: left;

        &.btn:hover:not(.active):not([disabled]) {
            background-color: $fhi-core-grey-light-2;
        }

        [class*="icon-"] {
            margin-right: $fhi-core-space-1;
            top: $fhi-core-px * -3;
        }
    }

    &__btn.active,
    &__check:checked + .fhi-btn-group__btn {
        background-color: $fhi-core-grey-4;
        border-color: $fhi-core-white;
        color: $fhi-core-white;
    }

    &__btn.active,
    &__check:not([type="checkbox"]):checked + .fhi-btn-group__btn {
        &:hover,
        &:focus {
            background-color: $fhi-core-grey-4;
            color: $fhi-core-white;
            text-decoration: none;

            &:not(.fhi-btn-group__split-btn-toggler):not([disabled]) {
                cursor: default;
            }
        }
    }

    &__check {
        &:focus-visible + .fhi-btn-group__btn {
            box-shadow: $form-check-input-focus-box-shadow !important;
        }
    }

    &__split-btn {
        border-right: 0;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding-right: $fhi-core-space-2 + $fhi-core-space-1;

        &.active:focus-visible {
            z-index: 2;
        }
    }

    &__split-btn-toggler {
        background-position: 40% 50%;
        background-repeat: no-repeat;
        border-left: 0;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        padding-left: $fhi-core-space-2;
        padding-right: $fhi-core-space-3;

        &::after {
            @extend .icon-chevron-down;
            border: 0;
            height: $fhi-core-px * 16;
            margin-top: $fhi-core-px * 3;
            width: $fhi-core-px * 16;
        }

        &.active {
            &,
            &:active,
            &:focus,
            &:hover {
                background-color: $fhi-core-charcoal-1;
            }

            &::after {
                filter: brightness(10);
            }
        }
    }

    &.btn-group-vertical > .btn:not(:first-child),
    &.btn-group-vertical > .btn-group:not(:first-child) {
        margin-top: 0;
    }

    .dropdown-item {
        white-space: wrap;
    }
}