.component_dropdown{
    position: relative;
    .dropdown_container{display: none; position: absolute; right: 0;}

    .dropdown_button{
        border: 1px solid rgba(0,0,0,0);
        border-radius: 4px;
        padding: 5px;
        min-width: 20px;
        text-align: center;
    }
    .dropdown_container{
        &:before{
            content: ' ';
            position: absolute;
            right: 10px;
            top: 1px;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid white;
        }
        padding-top: 5px;
        z-index: 3;
        ul{
            margin: 0;
            list-style-type: none;
            background: white;
            border: 1px solid var(--bg-color);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            color: var(--emphasis-secondary);
            border-radius: 3px;
            padding: 3px 0px;
            font-size: 0.92em;
            li{
                display: flex;
                > div{
                    width: 150px;
                    padding: 8px 5px 8px 10px;
                }
            }
        }
    }
}

.component_dropdown{
    &.active{
        .dropdown_container{
            display: block;
            li{
                background: white;
                transition: background 0.1s ease-out;
                &:hover{
                    background: rgba(0,0,0,0.05);
                }
            }
        }
        .dropdown_button{
            border-color: var(--bg-color);
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
    }
}