@use "variables" as *;

// Host component should take full height
:host {
    section {
        display: block;
        height: 100%;
    }
}

// Block
.dot-edit-content-sidebar-history {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    flex: 1; // Takes all available space in the accordion
}

// Elements
.dot-edit-content-sidebar-history__content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 0 $spacing-4;
    min-height: 0; // Important for flexbox scroll
}

// Custom timeline styles for PrimeNG Scroller
::ng-deep .dot-edit-content-sidebar-history__scroller {
    .p-scroller-content {
        padding-top: $spacing-1;
    }
}

.dot-edit-content-sidebar-history__loading {
    padding: $spacing-3 $spacing-4;

    ::ng-deep .p-skeleton {
        background-color: $color-palette-gray-200;
        border-radius: $border-radius-md;
    }
}

.dot-edit-content-sidebar-history__skeleton-item {
    margin-bottom: $spacing-3;

    &:last-child {
        margin-bottom: 0;
    }
}

// Push Publish styles
.dot-edit-content-sidebar-history__push-publish {
    padding: $spacing-4;
}

.dot-edit-content-sidebar-history__push-publish-message {
    margin-bottom: $spacing-3;
    color: $color-palette-gray-600;

    &:last-of-type {
        margin-bottom: $spacing-4;
    }
}

.dot-edit-content-sidebar-history__push-publish-list {
    margin: 0;
    padding-left: $spacing-4;
}

.dot-edit-content-sidebar-history__push-publish-item {
    margin-bottom: $spacing-2;
    color: $color-palette-gray-600;

    &:last-child {
        margin-bottom: 0;
    }
}

dot-history-timeline-item {
    padding-right: $spacing-4;
}
