.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #000000;
    min-width: 160px;
    z-index: 9999;

    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    border: 1px solid #1A1A1A;
    border-radius: 6px;

    &::before {
        content: "";
        position: absolute;
        transform: rotate(180deg);
        top: -12px;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }
}

.dropdown-content a {
    color: var(--link-color);
    padding: 6px 12px;
    text-decoration: none;
    display: block;
    font-size: 14px;

    &:first-child {
        border-top: none;
    }

    &:hover {
        text-decoration: none;
    }
}

.dropdown-content a:hover {
    background: rgb(20,20,20);
}

.dropdown:hover .dropdown-content {
    display: block;
}