@import "dxHelpers/reset";
@import "dxHelpers/text";
@import "dxHelpers/card";

:host {
    --dx-c-heading-max-lines: 4;
    --dx-c-card-grid-max-width: 60px;
    --dx-c-card-title-word-break: keep-all;
}

.card {
    display: flex;
    flex-direction: column;
}

.not-clickable {
    cursor: default;
}

/* Specificity of this rule and the next is required to override default "base" card behavior */
.card.dx-card-base.not-clickable:hover {
    box-shadow: var(--dx-g-box-shadow-sm); /* no shadow as if clickable */
}

.card.dx-card-base.not-clickable:hover dx-card-title {
    --dx-c-card-title-color: var(--dx-g-text-heading-color);
}

:not(.not-clickable) .body {
    padding-right: var(
        --dx-c-card-clickthrough-body-right-padding,
        64px
    ); /* leave room for the control */
}

.card-body {
    display: flex;
    flex-direction: row;
}

.card-label {
    display: block;
    margin-bottom: var(--dx-g-card-item-spacing);
}

.body-text-container {
    flex: 1;
    margin-bottom: 0;
}

.widget {
    align-self: center;
    margin-left: 18px;
}

.icon-button {
    border-radius: var(--dx-c-card-clickthrough-control-border-radius, 50%);
    height: var(--dx-c-card-clickthrough-control-height, 48px);
    width: var(--dx-c-card-clickthrough-control-width, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge {
    border-radius: 12px;
    font-weight: bold;
    height: fit-content;
    line-height: 24px;
    padding: 0 12px;
    text-wrap: nowrap;
}

/* text section */

.card_section-text {
    grid-area: text;
    flex-grow: 1;
    position: relative;
}

.dx-text-display-8 dx-button {
    margin-left: var(--dx-g-spacing-xs);
}

.dx-text-display-6 {
    position: relative;
    -webkit-line-clamp: var(--dx-c-heading-max-lines);
    -webkit-box-orient: vertical;
    display: box;
    overflow: hidden;
}

.dx-text-display-6 dx-icon {
    display: inline-block;
    transform: translateY(-3px);
}

/* mobile responsiveness */

@media screen and (max-width: 1024px) {
    .has-image:not(.show-mobile-image) .image {
        display: none;
    }
}