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

    .custom-button {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--gin-color-primary);
        transition: var(--gin-transition);
    }

    .custom-button.custom-button--mini {
        font-size: 14px;
        width: 28px;
        height: 28px;
    }

    .custom-button:hover {
        background: var(--gin-bg-item);
    }

    .custom-button:active {
        background: var(--gin-color-primary-light);
    }
}

.custom-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--gin-bg-layer);
    min-width: 120px;
    box-shadow: var(--gin-shadow-l2);
    z-index: 101;
    border-radius: var(--gin-border-l);
    font-size: var(--gin-font-size-m);
    padding: var(--gin-spacing-s);

    a {
        padding: var(--gin-spacing-s);
        text-decoration: none;
        display: block;
        border-radius: var(--gin-border-m);
        color: var(--gin-color-primary);
        line-height: 0.5;
    }

    a:hover {
        color: var(--gin-color-button-text);
        background: var(--gin-color-primary);
    }

    a.button--danger {
        color: var(--button-bg-color--danger);
        background: var(--button-fg-color--danger);
    }

    a.button--danger:hover {
        background: var(--button-bg-color--danger);
        color: var(--button-fg-color--danger);
    }
}