/* Initial CSS for Floating UI (https://floating-ui.com/docs/migration#positioning-function-change) */
.floating {
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

hr.dataset-list-element-divider {
    margin-left: auto;
    margin-right: auto;
}

/* facets on left */
.js-selected {
    background-color: #E8EBEE;
    border: 1px solid #E8EBEE;
    border-radius: 4px;
}

/* CSS for Floating UI components */

article[role="tooltip"] {
    width: max-content;
    position: absolute; /* float above everything else to not disrupt layout */
    top: 0;
    left: 0;
}

#arrow {
    position: absolute;
    background: inherit;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.tooltip {
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    font-size: 90%;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
}

/* Arrangement view as a 12-column grid */
.arrangement-grid {
    display: grid;
    grid-template-columns: repeat(12, 80px);    /* setting px instead of fr prevernts distortions if grid dimensions change */
    grid-gap: 0;
    width: 970px;  /* grid width + 2*border width */
    border: 5px solid black;
}

#dataset-arrangement-single-c, #dataset-arrangement-multi-c {
    width: 100%;
    overflow-x: auto; /* allow horizontal scrolling if needed */
}

.js-sortable-tile {
    border: 1px solid grey;
}

/* Copied this out of the Bulma "image" properties (normally when .content is present). Keep caption in center and above image */
.js-sortable-tile figcaption {
    text-align: center;
    font-style: italic;
    position: relative
}

/* Copied this out of the Bulma "image" properties when an aspect ratio is applied. Goal is to have image fit the tile */
.js-sortable-tile img {
    max-width: 100%;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.js-modal-display figure {
    border-color: darkgray;
    border-width: thin;
    border-style: solid;
}

.js-displays-modal .modal-content {
    width: 70%; /* make wider, which makes preview images larger */
}

.js-modal-tooltip {
    z-index: 1000; /* make sure it's on top of the modal */
}