@import url('/style/tooltip.css');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

/* The tooltip itself */
.warcraftdb-tooltip-container {
    display: none;
    position: absolute;
    z-index: 10000;
}
.warcraftdb-tooltip {
    box-sizing: border-box;
    padding: 8px;
    background-color: rgba(27, 26, 27, 0.95);
    border: 2px solid rgb(76, 74, 73);
    color: var(--color-tooltip-description);
    max-width: 415px;
    text-align: left;
    font-size: 14px;
    font-family: 'Titillium Web', sans-serif;
    line-height: normal;
    white-space: pre-line;
}
.warcraftdb-tooltip-icon {
    top: 0;
    left: calc(-3rem - 2px - 8px); /* -Size -Border -Gap */
    width: 3rem;
    height: 3rem;
    position: absolute;
    border: 2px solid rgb(76, 74, 73);
    background-size: 120%;
    background-position: center;
}
/* Mobile adjustments for the tooltips */
@media only screen and (max-width: 768px) {
    .warcraftdb-tooltip-container {
        max-width: calc(100vw - 30px);
        padding-top: 62px;
    }
    .warcraftdb-tooltip-icon {
        top: calc(62px - 3rem - 2px - 8px); /* Top Padding -Size -Border -Gap */
        left: 0;
    }
}

/* Icon Sizes */
.warcraftdb-icon-size-large {
    width: 56px;
    height: 56px;
}
.warcraftdb-icon-size-medium {
    width: 36px;
    height: 36px;
}
.warcraftdb-icon-size-small {
    width: 18px;
    height: 18px;
}

/* Links */
.warcraftdb-link {
    position: relative;
    text-decoration: none;
}
/* Link icons */
.warcraftdb-link .warcraftdb-link-icon {
    margin-right: 4px;
    border: 1px solid black;
    vertical-align: middle;
    background-size: 120%;
    background-position: center;
    display: inline-block;
}
.warcraftdb-link:hover .warcraftdb-link-icon  {
    border: 1px solid transparent;
}

.misc {
    color: var(--color-tooltip-description);
}
.q-0 {
    color: var(--color-quality-poor);
}
.q-1 {
    color: var(--color-quality-common);
}
.q-2 {
    color: var(--color-quality-uncommon);
}
.q-3 {
    color: var(--color-quality-rare);
}
.q-4 {
    color: var(--color-quality-epic);
}
.q-5 {
    color: var(--color-quality-legendary);
}
.q-6 {
    color: var(--color-quality-artifact);
}
.q-7 {
    color: var(--color-quality-heirloom);
}
.q-8 {
    color: var(--color-quality-token);
}