$class: '.tab-menu';

#{$class} {
    width: 100%;
    max-height: 100%;
    font-size: var(--g-text-body-1-font-size);

    --_--scroll-compensation: var(--dl-tab-menu-scroll-compensation, 0);
    --_--tab-items-width: var(--dl-tab-menu-items-width);

    --_--tab-button-outlined-padding: 0;
    --_--tab-button-add-height: 28px;

    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: var(--g-spacing-1);
    margin-inline-end: calc(var(--_--scroll-compensation) * -1);

    &__action-button {
        justify-content: flex-start;
    }

    &__list-item {
        padding: 0 var(--g-spacing-4);
        border-radius: var(--g-border-radius-m);
        margin-block-end: var(--g-spacing-1);
        width: var(--_--tab-items-width);

        .g-list__item-sort-icon {
            margin-inline-start: 2px;
            margin-inline-end: var(--g-spacing-2);
        }
    }

    &__item {
        display: flex;
        align-items: center;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        cursor: pointer;
        justify-content: space-between;
    }

    &__item-star {
        margin-inline-end: var(--g-spacing-2);
        line-height: 0;
    }

    &__item-star-inactive {
        color: var(--g-color-text-secondary);
    }

    &__item-star-active {
        color: var(--g-color-base-misc-heavy-hover);
    }

    &__item-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 160px;

        #{$class}__item & {
            max-width: 176px;
        }
    }

    &__item-content {
        display: flex;
        align-items: center;
        width: 100%;
    }

    &__list {
        overflow-y: auto;
        padding-inline-end: var(--_--scroll-compensation);
    }

    &__buttons-row {
        display: flex;
        padding-inline: 0 var(--_--scroll-compensation);
        gap: var(--g-spacing-2);
    }
}
