@use "../../wwwroot/scss/variables" as *;

.card {
    --bb-card-shadow: #{$bb-card-shadow};
    --bb-card-hover-shadow: #{$bb-card-hover-shadow};
    --bb-card-title-margin-left: #{$bb-card-title-margin-left};
    --bb-card-header-tag-height: #{$bb-card-header-tag-height};
    --bs-card-title-spacer-y: #{$bb-card-title-spacer-y};
}

.card-header {
    border-bottom-width: 0;
    display: flex;
    align-items: center;

    .card-collapse-arrow {
        transition: transform .3s linear;
    }

    .card-collapse-bar {
        cursor: pointer;
        flex: 1;

        .card-title {
            margin-inline-start: var(--bb-card-title-margin-left);
        }
    }

    .card-title {
        flex: 1;
    }

    .tag {
        line-height: var(--bb-card-header-tag-height);
    }

    + .card-body {
        border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
    }
}

.card-shadow {
    box-shadow: var(--bb-card-shadow);
    transition: box-shadow .3s linear;

    &:hover {
        box-shadow: var(--bb-card-hover-shadow);
    }
}

[aria-expanded="true"] {
    > .card-collapse-arrow {
        transform: rotate(90deg);
    }
}

.is-collapsible {
    > .card-body {
        padding: 0;

        > .card-body-wrapper {
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
        }
    }
}
