.file-callout {
    position: fixed;
    z-index: 38;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 9px;
    width: min(370px, calc(100vw - 24px));
    min-height: 42px;
    padding: 9px 9px 8px 10px;
    border: 1px solid #3a536b;
    border-radius: 6px;
    background: #172230;
    color: #d7e0ea;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 16px 36px rgb(0 0 0 / 38%);
    animation: callout-pop 140ms ease-out;
}

.file-callout::before,
.file-callout::after {
    position: absolute;
    width: 0;
    height: 0;
    content: "";
}

.file-callout::before {
    border: 9px solid transparent;
}

.file-callout::after {
    border: 8px solid transparent;
}

.file-callout[data-tip-side="below"]::before {
    top: -18px;
    left: var(--callout-arrow-x);
    border-bottom-color: #3a536b;
}

.file-callout[data-tip-side="below"]::after {
    top: -15px;
    left: calc(var(--callout-arrow-x) + 1px);
    border-bottom-color: #172230;
}

.file-callout[data-tip-side="above"]::before {
    bottom: -18px;
    left: var(--callout-arrow-x);
    border-top-color: #3a536b;
}

.file-callout[data-tip-side="above"]::after {
    bottom: -15px;
    left: calc(var(--callout-arrow-x) + 1px);
    border-top-color: #172230;
}

.file-callout > .fa-solid {
    color: #82cfff;
}

.file-callout .tip-close {
    display: grid;
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a8b2be;
}

.file-callout .tip-close:hover,
.file-callout .tip-close:focus-visible {
    background: #222b35;
    color: #ffffff;
}

.tip-shutup {
    grid-column: 2 / -1;
    justify-self: start;
    min-height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8fc8ff;
    font-size: 12px;
    text-decoration: underline;
}

.tip-shutup:hover,
.tip-shutup:focus-visible {
    color: #ffffff;
}

@keyframes callout-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}