$visual-trigger-width: $fhi-core-px * 40;
$visual-trigger-width-md: $fhi-core-px * 60;

.accordion-button {
    font-family: $btn-font-family;
    font-size: $fhi-core-font-size-3;
    overflow: hidden;
    padding-right: calc(#{$visual-trigger-width} + #{$fhi-core-space-3});

    &,
    &:not(.collapsed) {
        box-shadow: none;
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: $visual-trigger-width;
    }

    &::after {
        position: relative;
        right: calc(
            (
                    (#{$visual-trigger-width} / 2) + (#{$fhi-core-space-3}) +
                        (#{$accordion-icon-width} / 2)
                ) * -1
        );
        z-index: 1;
    }

    &:hover::before {
        background-color: $fhi-core-blue-grey-3;
    }
}

.accordion:not(.accordion-flush) {
    .accordion-item {
        border: 0;
        border-radius: $border-radius;
        margin-top: $fhi-core-space-1;
        margin-bottom: $fhi-core-space-1;
    }

    .accordion-button {
        border-radius: $border-radius;

        &:not(.collapsed) {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

.accordion-flush {
    .accordion-item {
        &:first-of-type {
            border-top: 1px solid $accordion-border-color;
        }

        &:last-of-type {
            border-bottom: 1px solid $accordion-border-color;
        }
    }

    .accordion-item {
        background-color: $fhi-core-white;
    }

    .accordion-item:last-of-type .accordion-button.collapsed {
        border-radius: 0;
    }

    .accordion-button {
        &:hover::before {
            background-color: $fhi-core-grey-light-2;
        }
    }
}

@include media-breakpoint-up(md) {
    .accordion-button {
        padding-right: calc(#{$visual-trigger-width-md} + #{$fhi-core-space-3});

        &::before {
            width: $visual-trigger-width-md;
            transition: background-color 0.15s;
        }

        &::after {
            right: calc(
                (
                        (#{$visual-trigger-width-md} / 2) +
                            (#{$fhi-core-space-3}) +
                            (#{$accordion-icon-width} / 2)
                    ) * -1
            );
        }
    }
}