@import 'scss/styles.scss';

// Custom scrollbar styles for the horizontal scroll
.modal-items-scrollable-columns {
    margin-bottom: 4px !important;
    overscroll-behavior-x: none;

    &::-webkit-scrollbar {
        height: 6px !important;
        background: $ta-light-grey-5 !important;
        border-radius: 1px !important;
    }

    &::-webkit-scrollbar-thumb {
        background-color: $ta-light-grey-6 !important;
        border-radius: 2px !important;
        height: 4px !important;
        border: 1px solid $ta-light-grey-5 !important;
    }

    &::-webkit-scrollbar-button {
        display: none !important;
    }

    // Import modal: hide native scrollbar (custom scrollbar is shown below)
    &.native-scrollbar-hidden {
        margin-bottom: 0 !important;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none !important;
        }
    }

    // Fix background for overflowed items
    .d-grid {
        min-width: max-content !important;
    }
}

// Sticky layout container with shadows positioned correctly
.d-flex.align-items-center.position-relative {
    // Right shadow border - always at the right edge of the entire container
    &.show-right-shadow::after {
        content: '';
        position: absolute;
        top: 4px;
        right: 0;
        width: 8px;
        height: calc(100% - 16px);
        background: linear-gradient(
            270deg,
            #dadada 0%,
            rgba(218, 218, 218, 0) 100%
        );
        z-index: 1;
        pointer-events: none;
    }

    &.show-right-shadow-import-modal::after {
        height: 100%;
    }
}