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

:host {
    --dx-c-card-title-color: var(--dx-g-text-heading-color);
    --dx-c-card-title-font-size: var(--dx-g-text-xl);
    --dx-c-card-title-line-height: 28px;
    --dx-c-card-title-letter-spacing: -0.1px;
    --dx-c-card-title-icon-size: 22px;
}

h3.dx-text-display-6 {
    color: var(--dx-c-card-title-color);
    transition: var(--dx-g-transition-hue-1x);
    font-size: var(--dx-c-card-title-font-size);
    line-height: var(--dx-c-card-title-line-height);
    letter-spacing: var(--dx-c-card-title-letter-spacing);
    word-break: var(--dx-c-card-title-word-break, break-word);
    hyphens: auto;
}

.nowrap {
    white-space: nowrap;
}

dx-icon {
    --dx-c-icon-size: var(--dx-c-card-title-icon-size);

    display: inline-flex;
    vertical-align: middle;
    transform: translateY(-2px);
}

@media screen and (max-width: 1024px) {
    .dx-text-display-6 {
        font-size: 20px;
        line-height: 24px;
    }

    dx-icon {
        --dx-c-card-title-icon-size: 20px;
    }
}