/* ATTACHMENTS */
.attachments {
    margin-top: 20px;
}

.attachments-wrapper-gallery {
    --file-width: 10rem;
    --file-height: 8rem;
    --file-title-font-size: 12px;
    --file-wrapper-display: column;
    --file-wrapper-align-items: flex-start;
    --file-wrapper-visibility: hidden;
    --list-unique-item-display: none;
    --media-background-position: 0;
}

.attachments-wrapper-list {
    --file-width: 100%;
    --file-height: 100%;
    --file-title-font-size: 14px;
    --file-wrapper-display: row;
    --file-wrapper-align-items: center;
    --file-wrapper-visibility: visible;
    --list-unique-item-display: flex;
    --media-background-position: 99px;
}

.media-group {
    display: flex;
    flex-wrap: wrap;
}


.list-unique-item {
    display: var(--list-unique-item-display);
    align-items: center;
    justify-content: flex-start;
}

.file {
    background: rgb(244, 245, 247);
    border-radius: 4px;
    box-shadow: rgba(9, 30, 66, 0.2) 0 1px 1px, rgba(9, 30, 66, 0.24) 0 0 1px 0;
    color: rgb(94, 108, 132);
    height: var(--file-height);
    margin: 4px;
    max-height: 100%;
    max-width: 100%;
    min-height: 3rem;
    position: relative;
    width: var(--file-width);
}

.file.media {
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: var(--media-background-position);
}

.file-full,
.file-wrapper {
    border-radius: 4px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.file-wrapper {
    align-items: var(--file-wrapper-align-items);
    display: flex;
    justify-content: space-between;
    flex-direction: var(--file-wrapper-display);
    padding: 16px;
    word-break: break-word;
}

.file-title {
    font-size: var(--file-title-font-size);
    overflow-y: auto;
    overflow-wrap: break-word;
    white-space: initial;
    width: 100%;
}

.file-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.file-download {
    width: 2rem;
}

.file-size {
    width: 4rem;
}

.file-created-at {
    width: 14rem;
}

.file-labels {
    width: 15rem;
    gap: 10px;
}

.file-comment {
    width: 25rem;
}

.file-full:hover {
    color: #FFFFFF;
    background-color: rgba(9, 30, 66, 0.5);
}

.media .file-full {
    visibility: var(--file-wrapper-visibility);
}

.media:hover .file-full {
    cursor: pointer;
    visibility: visible;
}

.attachments-wrapper-list .media:hover .file-title {
    text-decoration: underline;
}

.file-download:hover,
.aui-iconfont-download:hover {
    color: #77bbff;
}

.file-type-icon {
    margin-right: 8px;
    width: 3.5rem;
}

.file-tooltip {
    background-color: #7d899c;
    border-radius: 4px;
    box-shadow: rgba(9, 30, 66, 0.2) 0 1px 1px, rgba(9, 30, 66, 0.24) 0 0 1px 0;
    color: #FFFFFF;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-height: fit-content;
    padding: 16px;
    position: absolute;
    width: 20rem;
    z-index: 10;
}

.file-tooltip.left {
    left: 1rem;
}

.file-tooltip.right {
    right: 1rem;
}

.file-tooltip.top {
    top: 9rem;
}

.file-tooltip.bottom {
    bottom: 9rem;
}

.attachments-wrapper-gallery .file-full:hover .file-tooltip {
    display: flex;
}

.attachments-wrapper-list .file-full:hover .tooltip-image-preview {
    display: flex;
}

.tooltip-image-preview {
    --width: 8rem;
    --height: 6rem;
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    box-shadow: rgba(9, 30, 66, 0.2) 0 1px 1px, rgba(9, 30, 66, 0.24) 0 0 1px 0;
    display: none;
    height: 6rem;
    bottom: calc(var(--height) / 2 + 0.25rem);
    left: 0.2rem;
    position: absolute;
    width: var(--width);
    z-index: 2;
}

.attachments-list-header {
    font-weight: bold;
    padding: 0.5rem 1rem;
    width: var(--file-width);
}

.attachments-wrapper-list .media video {
    height: 0;
}

.toggle-attachments-view-button {
    position: relative;
    top: -2.25rem;
    right: -8rem;
    background: none;
    border: none;
    color: rgb(94, 108, 132);
    cursor: pointer;
}

.toggle-attachments-view-button, .attachments-view {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-items: center;
}

.attachments:has(.attachments-wrapper-gallery) .attachments-view.gallery-view {
    display: none;
}

.attachments:has(.attachments-wrapper-list) .attachments-view.list-view {
    display: none;
}

main.attachment-share {
    box-shadow: inset 1px 1px 4px #ddd;
}

@media only screen and (max-width: 1200px) {
    .attachments-wrapper-list .file-created-at,
    .attachments-wrapper-list .file-comment {
        display: none;
    }
}

/*DARK MODE STYLES*/

html.dark-mode {
    color-scheme: dark
}

html.dark-mode .file, html.dark-mode .file.media {
    color: #e5e9f6 !important;
    box-shadow: rgb(0, 0, 0, 88%) 0 1px 1px, rgb(0, 0, 0, 88%) 0 0 1px 0;
    background-color: rgb(61, 66, 76);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: var(--media-background-position);
}

html.dark-mode .file-title {
    color: rgb(188, 202, 227);
}

html.dark-mode .file .file-bottom {
    color: rgb(188, 202, 227);
}

html.dark-mode .group-label {
    color: rgb(135, 149, 173);
}

html.dark-mode main.attachment-share {
    box-shadow: inset 1px 1px 4px #2c353b;
}