[fwcustomdropdown="main"] {
    --trigger-border: #e5e5e5;
    --trigger-border-radius: 7px;
    --trigger-border-size: 1px;
    --trigger-background: #fff;
    --trigger-text-color: #000;
    --trigger-box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    --content-border: var(--trigger-border);
    --content-border-size: var(--trigger-border-size);
    --content-border-radius: var(--trigger-border-radius);
    --content-background: var(--trigger-background);
    --content-text-color: var(--trigger-text-color);
    --content-box-shadow: var(--trigger-box-shadow);
    --dropdown-transition-delay: 0.15s;
    --dropdown-gap: 4px;
    position: relative;
    width: max-content;
}
[fwcustomdropdown="main"] [fwcustomdropdown="trigger"] {
    color: var(--trigger-text-color);
    background-color: var(--trigger-background);
    border-radius: var(--trigger-border-radius);
    border: var(--trigger-border-size) solid var(--trigger-border);
    box-shadow: var(--trigger-box-shadow);
    user-select: none;
    cursor: pointer;
    transition: background-color var(--dropdown-transition-delay) ease,
        box-shadow var(--dropdown-transition-delay) ease,
        border-color var(--dropdown-transition-delay) ease;
}
[fwcustomdropdown="main"] [fwcustomdropdown="content"] {
    position: absolute;
    color: var(--content-text-color);
    background-color: var(--content-background);
    border-radius: var(--content-border-radius);
    border: var(--content-border-size) solid var(--content-border);
    box-shadow: var(--content-box-shadow);
    z-index: 9999;
    user-select: none;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transform-origin: top center;
    overflow: hidden;
    transition: visibility var(--dropdown-transition-delay) ease,
        opacity var(--dropdown-transition-delay) ease,
        transform var(--dropdown-transition-delay) ease;
}
[fwcustomdropdown="main"] [fwcustomdropdown="content"][fwcustomdropdownside="top"] {
    bottom: calc(100% + var(--dropdown-gap));
}
[fwcustomdropdown="main"] [fwcustomdropdown="content"][fwcustomdropdownside="right"] {
    left: calc(100% + var(--dropdown-gap));
}
[fwcustomdropdown="main"] [fwcustomdropdown="content"][fwcustomdropdownside="bottom"] {
    top: calc(100% + var(--dropdown-gap));
}
[fwcustomdropdown="main"] [fwcustomdropdown="content"][fwcustomdropdownside="left"] {
    right: calc(100% + var(--dropdown-gap));
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="start"]:not(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    left: 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="center"]:not(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    left: 50%;
    translate: -50% 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="end"]:not(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    right: 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="start"]:is(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    top: 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="center"]:is(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    top: 50%;
    translate: 0 -50%;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"][fwcustomdropdownalign="end"]:is(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownside="left"]
    ) {
    bottom: 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:not(
        :is(
                [fwcustomdropdownside="top"],
                [fwcustomdropdownside="right"],
                [fwcustomdropdownside="bottom"],
                [fwcustomdropdownside="left"]
            )
    ) {
    top: calc(100% + var(--dropdown-gap));
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:not(
        :is(
                [fwcustomdropdownalign="start"],
                [fwcustomdropdownalign="center"],
                [fwcustomdropdownalign="end"]
            )
    ):is(
        [fwcustomdropdownside="top"],
        [fwcustomdropdownside="bottom"],
        [fwcustomdropdownside=""],
        :not([fwcustomdropdownside])
    ) {
    left: 50%;
    translate: -50% 0;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:not(
        :is(
                [fwcustomdropdownalign="start"],
                [fwcustomdropdownalign="center"],
                [fwcustomdropdownalign="end"]
            )
    ):is([fwcustomdropdownside="left"], [fwcustomdropdownside="right"]) {
    top: 50%;
    translate: 0 -50%;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownalign="start"][fwcustomdropdownside="right"],
        [fwcustomdropdownalign="start"][fwcustomdropdownside="bottom"],
        [fwcustomdropdownalign="start"]
    ) {
    transform-origin: top left;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownalign="center"],
        [fwcustomdropdownside="bottom"],
        [fwcustomdropdownalign="center"][fwcustomdropdownside="bottom"]
    ) {
    transform-origin: top center;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownalign="start"][fwcustomdropdownside="left"],
        [fwcustomdropdownalign="end"][fwcustomdropdownside="bottom"],
        [fwcustomdropdownalign="end"]
    ) {
    transform-origin: top right;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownside="right"],
        [fwcustomdropdownalign="center"][fwcustomdropdownside="right"]
    ) {
    transform-origin: left center;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownside="left"],
        [fwcustomdropdownalign="center"][fwcustomdropdownside="left"]
    ) {
    transform-origin: right center;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownalign="start"][fwcustomdropdownside="top"],
        [fwcustomdropdownalign="end"][fwcustomdropdownside="right"]
    ) {
    transform-origin: bottom left;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownside="top"],
        [fwcustomdropdownalign="center"][fwcustomdropdownside="top"]
    ) {
    transform-origin: bottom center;
}
[fwcustomdropdown="main"]
    [fwcustomdropdown="content"]:is(
        [fwcustomdropdownalign="end"][fwcustomdropdownside="top"],
        [fwcustomdropdownalign="end"][fwcustomdropdownside="left"]
    ) {
    transform-origin: bottom right;
}
[fwcustomdropdown="main"]:not([aria-expanded="true"]) [fwcustomdropdown="content"] {
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.75);
    transition: visibility var(--dropdown-transition-delay) ease,
        opacity var(--dropdown-transition-delay) ease,
        transform var(--dropdown-transition-delay) ease;
}