@import "../variables/variables";
@import "../mixins/public/typography-mixins";
@import "../mixins/private/token-mixins";

.section-title {
    align-items: baseline;
    display: flex;
    margin: 30px 0 10px;
}

.section-title__title-container {
    max-width: 75%;
}

.section-title__title {
    @include typography-large-1();

    margin: 0;
}

.section-title__subtitle {
    @include typography-regular();
    @include color-token(
        section-title-subtitle-color,
        color-foreground-secondary
    );
}

.section-title__title svg.icon {
    @include background-color-token(color-background-secondary);

    border-radius: 12px;
    margin-inline-start: var(--spacing-100);
    padding: 7px;
}

.section-title__info {
    bottom: -3px;
    margin: 0 var(--spacing-300) 0 var(--spacing-100);
    position: relative;
}

.section-title__overflow {
    margin: 0 var(--spacing-300) 0 auto;
}

.section-title__cta,
.section-title__overflow {
    align-items: baseline;
    display: flex;
    height: var(--spacing-400);
    margin-left: auto;
    margin-right: 0;
}

.section-title button.icon-btn,
.section-title__overflow button.icon-btn {
    height: var(--spacing-400);
    min-width: var(--spacing-400);
    width: var(--spacing-400);
}

.section-title__title-container + button.icon-btn {
    margin-left: var(--spacing-100);
}

.section-title--large {
    .section-title__title {
        @include typography-large-1();
    }

    > .section-title__cta,
    > .section-title__info,
    > .section-title__overflow {
        height: var(--spacing-400);
    }
}

[dir="rtl"] {
    .section-title__title svg.icon {
        transform: rotate(180deg);
    }

    .section-title__cta {
        margin-left: 0;
        margin-right: auto;
    }

    .section-title__overflow {
        margin-left: 0;
        margin-right: auto;
    }

    .section-title__info {
        margin: 0 var(--spacing-100) 0 var(--spacing-300);
    }
}

@media (min-width: $_screen-size-SM) {
    .section-title__title {
        @include typography-large-2();
    }

    .section-title__subtitle {
        @include typography-medium();
    }
}
