:root {
    --bs-border-color: #b7b7b7;
}

.pages {
    &.table {
        white-space: nowrap;

        .parent {
            --bs-table-bg: rgba(var(--bs-secondary-rgb), 0.2);
        }

        tbody {

            & tr:not(.child) {
                border-block-start: 2px solid var(--bs-primary);
            }

            img {
                width: 50px;
                aspect-ratio: 1;
            }

            .child {
                td {
                    color: var(--bs-secondary);
                }

                .order {
                    padding-inline-start: 1rem;
                }

                .action {
                    padding-inline-end: 1rem;
                }
            }
        }
    }
}

.media-navigation {
    .media {
        & .card {
            border: 1px solid var(--bs-light);
            overflow: hidden;

            img {
                aspect-ratio: 1;
            }

            &:hover {
                background-color: rgba(var(--bs-secondary-rgb), 0.2);
                border-color: var(--bs-primary);
            }
        }
    }
    
    .edit-name {
        cursor: pointer;
    }
 
    .media-items {
        overflow-y: auto;
        height: 75vh;
    }
}

.upload {
    border: 3px dashed var(--bs-secondary);
}

.media {
    &.grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.5rem;
    }

    &.lines {
        display: grid;
        grid-template-columns: repeat(1fr);
        --image-size: 80px grid-template-rows: var(--image-size);

        img {
            max-width: 100px;
            aspect-ratio: 1;
        }

        & .card {
            display: flex;
            flex-direction: row;
            overflow: visible;

            .card-body>.row {
                align-items: center;
                flex-direction: row;

                width: 100%;
                justify-content: space-between;
            }

            .medium-content {
                display: flex;
                gap: 0.25rem;
                align-items: baseline;
                flex-direction: row;
            }
        }
    }
}

.filters {
    background-color: rgba(var(--bs-secondary-rgb), 0.2);
 
}

.copy-notification {
    width: 50%;
    padding: 10px;
    border: 3px solid rgb(8 31 92);
    border-radius: 6px;
    z-index: 2;
    background-color: rgb(255 255 255);
    top: 50%;
    color: #081f5c;
    position: absolute;
    text-align: center;
}

.pdf-icon-container {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 2px solid #dc3545;
    border-radius: 8px;
    min-height: 100px;
}

.pdf-icon {
    font-size: 3rem;
    color: #dc3545;
}

.media.lines .pdf-icon-container {
    min-height: 80px;
    max-width: 100px;
}

.media.lines .pdf-icon {
    font-size: 2rem;
}

.video-icon-container {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    border-radius: 8px;
    min-height: 100px;
}

.video-icon {
    font-size: 3rem;
    color: #007bff;
}

.media.lines .video-icon-container {
    min-height: 80px;
    max-width: 100px;
}

.media.lines .video-icon {
    font-size: 2rem;
}