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

kiss-dropdownbox {
    display: none;
    position: absolute;
    min-width: 200px;
    top: 100%;
    left: auto;
    right: 0;
    opacity: 0;
    will-change: opacity;
}

kiss-dropdown[open="true"] kiss-dropdownbox {
    display: block;
    opacity: 1;
    transform: translateY(10px);

    @starting-style {
        opacity: 0;
        transform: translateY(20px);
    }
}

kiss-dropdownbox {
    background: var(--kiss-dropdown-background, var(--kiss-color-contrast));
    border-radius: var(--kiss-dropdown-border-radius, 3px);
    padding: var(--kiss-dropdown-padding, 10px);
    left: auto;
    right: 0;
    margin-top: 10px;
    min-width: 250px;
    transition: all 200ms;
    z-index: 5;
}

kiss-dropdownbox[pos="left"] {
    left: 0;
    right: auto;
}

kiss-dropdownbox[pos="center"] {
    right: auto;
    left: 50%;
    transform: translateY(-40%) translateX(-50%);
}

kiss-dropdown[open="true"] kiss-dropdownbox[pos="center"] {
    transform: translateY(-50%) translateX(-50%);
}

kiss-dropdownbox[pos="aside-left"] {
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: -10px;
    transform: translateY(20px) translateX(-100%);
    right: auto;
}

kiss-dropdown[open="true"] kiss-dropdownbox[pos="aside-left"] {
    transform: translateY(0px) translateX(-100%);
}

/* RTL Support */

[dir="rtl"] kiss-dropdownbox {
    left: 0;
    right: auto;
}

[dir="rtl"] kiss-dropdownbox[pos="center"] {
    right: auto;
    left: 50%;
    transform: translateY(-40%) translateX(50%);
}

[dir="rtl"] kiss-dropdown[open="true"] kiss-dropdownbox[pos="center"] {
    transform: translateY(-50%) translateX(50%);
}

[dir="rtl"] kiss-dropdownbox[pos="aside-left"] {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -10px;
    transform: translateY(20px) translateX(100%);
}

[dir="rtl"] kiss-dropdown[open="true"] kiss-dropdownbox[pos="aside-left"] {
    transform: translateY(0px) translateX(100%);
}
