@use '../tokens';
@use './tokens' as *;
@use './vendor-prefixes';

// This mixin will ensure that lines that overflow the container will hide the overflow and
// truncate neatly with an ellipsis.
@mixin kbq-truncate-line() {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// This mixin normalizes default element styles, e.g. font weight for heading text.
@mixin kbq-normalize-text() {
    & > * {
        margin: 0;
        padding: 0;
        font-weight: normal;
        font-size: inherit;
    }
}

// This mixin provides base styles for the wrapper around kbq-line elements in a list.
@mixin kbq-line-wrapper-base() {
    @include kbq-normalize-text();

    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: content-box;
    overflow: hidden;

    // Must remove wrapper when lines are empty or it takes up horizontal
    // space and pushes other elements to the right.
    &:empty {
        display: none;
    }
}

@mixin kbq-list-text() {
    @include kbq-line-wrapper-base();
    display: inline-block;

    @include kbq-truncate-line();
}

// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
@mixin kbq-list-item-base() {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 32px;
    gap: var(--kbq-size-s);

    border: var(--kbq-size-3xs) solid transparent;

    padding: var(--kbq-size-xxs) kbq-difference-series-css-variables([size-m, size-3xs]);

    .kbq-list-text {
        @include kbq-list-text();
    }

    .kbq-list-option-caption {
        padding-top: var(--kbq-size-3xs);
    }
}

@mixin kbq-list-header-base() {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;

    border-left: var(--kbq-size-3xs) solid transparent;
    border-right: var(--kbq-size-3xs) solid transparent;

    padding-top: var(--kbq-size-xs);
    padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
    padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
    padding-bottom: var(--kbq-size-3xs);

    .kbq-list-text {
        @include kbq-list-text();
    }
}

@mixin kbq-list-subheading-base() {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;

    border-left: var(--kbq-size-3xs) solid transparent;
    border-right: var(--kbq-size-3xs) solid transparent;

    padding-top: var(--kbq-size-m);
    padding-left: kbq-difference-series-css-variables([size-m, size-3xs]);
    padding-right: kbq-difference-series-css-variables([size-m, size-3xs]);
    padding-bottom: var(--kbq-size-xxs);

    .kbq-list-text {
        @include kbq-list-text();
    }
}

.kbq-truncate-line {
    @include kbq-truncate-line();
}

.kbq-no-select {
    @include vendor-prefixes.user-select(none);
}