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

:host {
    display: block;
}

.text-group {
    display: flex;
    flex-direction: column;

    --dx-group-text-spacing-vertical-xl: var(--dx-g-spacing-2xl);
    --dx-group-text-spacing-vertical-lg: var(--dx-g-spacing-lg);
    --dx-group-text-spacing-vertical-sm: var(--dx-g-spacing-sm);
}

.hide-slot .slot-container {
    display: none;
}

.text-group:not(.hide-slot) .slot-container {
    margin-top: var(--dx-group-text-spacing-vertical-xl);
}

.label {
    margin-bottom: var(--dx-group-text-spacing-vertical-lg);
}

/* subtitle */

.subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--dx-group-text-spacing-vertical-lg);
}

.subtitle > span {
    position: relative;
    white-space: nowrap;
}

.subtitle > *:not(:last-child) {
    margin-right: var(--dx-g-spacing-lg);
}

.subtitle > *:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -12px;
    top: calc(40% - 1px);
    height: 2px;
    width: 2px;
    background: var(--dx-g-blue-vibrant-20);
}

/* body */

.body {
    margin-top: var(--dx-group-text-spacing-vertical-lg);
}

/* button group */

.button-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--dx-group-text-spacing-vertical-xl);
}

.button-group > dx-button:not(:last-of-type) {
    margin-right: var(--dx-g-spacing-sm);
}

/* breakpoints tablet */

@media screen and (max-width: 1024px) {
    .title.dx-text-display-2 {
        font-size: var(--dx-g-text-3xl);
        line-height: var(--dx-g-spacing-2xl);
    }

    .subtitle.dx-text-display-8 {
        font-size: var(--dx-g-text-sm);
    }

    .body.dx-text-body-1 {
        font-size: var(--dx-g-text-base);
        line-height: var(--dx-g-spacing-lg);
    }

    .title.dx-text-display-4 {
        font-size: var(--dx-g-text-2xl);
        line-height: var(--dx-g-spacing-xl);
    }

    .body.dx-text-body-2 {
        font-size: var(--dx-g-text-sm);
        line-height: var(--dx-g-spacing-lg);
    }
}

/* breakpoints mobile */

@media screen and (max-width: 768px) {
    .button-group > dx-button {
        width: 100%;
    }

    .button-group > dx-button:not(:last-of-type) {
        margin-right: 0;
        margin-bottom: var(--dx-g-spacing-sm);
    }
}