@import "../var.scss";

$j-prefix-dropdown: "#{$j-prefix}-dropdown" !default;
$j-prefix-dropdown-header: "#{$j-prefix}-dropdown-header" !default;
$j-prefix-dropdown-content: "#{$j-prefix}-dropdown-content" !default;
$j-prefix-dropdown-wrapper: "#{$j-prefix}-dropdown-wrapper" !default;
$j-prefix-dropdown-arrow: "#{$j-prefix}-dropdown-arrow" !default;

.#{$j-prefix-dropdown} {
    position: relative;

    &[data-active] {
        .#{$j-prefix-dropdown-content} {
            margin: 0;
            opacity: 1;
            pointer-events: auto;
            visibility: visible;

            &[data-dir="top"] {
                margin: 0;
            }
        }
    }
}

.#{$j-prefix-dropdown-header} {
    width: 100%;
    user-select: none;
}

.#{$j-prefix-dropdown-content} {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: $j-index-dropdown;
    margin: 5px 0 0 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.15s ease-in-out;

    // dir
    &[data-dir="top"] {
        top: 0px;

        .#{$j-prefix-dropdown-wrapper} {
            margin: 0 0 12px 0;
            bottom: 0;
            box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.1),
                0px 4px 13px 0px rgba(0, 0, 0, 0.1);

            .#{$j-prefix-dropdown-arrow} {
                top: auto;
                bottom: -10px;
                transform: translateX(-50%) rotate(180deg);

                &[data-align="left"] {
                    transform: translateX(0) rotate(180deg);
                    left: 10%;
                }

                &[data-align="center"] {
                    transform: translateX(-50%) rotate(180deg);
                    left: 50%;
                }

                &[data-align="right"] {
                    transform: translateX(0) rotate(180deg);
                    left: auto;
                    right: 10%;
                }
            }
        }
    }

    // ALIGN BOTTOM
    &[data-align="left"]:not([data-dir]),
    &[data-align="left"][data-dir="bottom"] {
        left: 0;
        transform: translate(0, 0);

        .#{$j-prefix-dropdown-wrapper} {
            left: 0;
            transform: translate(0, 0);
        }
    }

    &[data-align="stretch"]:not([data-dir]),
    &[data-align="stretch"][data-dir="bottom"] {
        .#{$j-prefix-dropdown-wrapper} {
            min-width: 100%;
        }
    }

    &[data-align="right"]:not([data-dir]),
    &[data-align="right"][data-dir="bottom"] {
        left: auto;
        right: 0;
        transform: translate(0, 0);

        .#{$j-prefix-dropdown-wrapper} {
            left: auto;
            right: 0;
            transform: translate(0, 0);
        }
    }

    // ALIGN TOP
    &[data-align="left"][data-dir="top"] {
        left: 0;
        transform: translate(0, 0);

        .#{$j-prefix-dropdown-wrapper} {
            left: 0;
            transform: translate(0, 0);
        }
    }

    &[data-align="stretch"][data-dir="top"] {
        .#{$j-prefix-dropdown-wrapper} {
            min-width: 100%;
        }
    }

    &[data-align="right"][data-dir="top"] {
        left: auto;
        right: 0;
        transform: translate(0, 0);

        .#{$j-prefix-dropdown-wrapper} {
            left: auto;
            right: 0;
            transform: translate(0, 0);
        }
    }
}

.#{$j-prefix-dropdown-wrapper} {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    margin-top: 12px;
    max-width: calc(100vw - 40px);
    white-space: normal;
    border: 0;
    box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.1),
        0px -2px 13px 0px rgba(0, 0, 0, 0.1);

    .#{$j-prefix-dropdown-arrow} {
        top: -10px;
        position: absolute;
        display: block;
        width: 16px;
        height: 16px;
        transform: translateX(-50%);
        left: 50%;
        left: 50%;
        top: -10px;
        width: 24px;
        height: 12px;
        z-index: $j-index-dropdown;

        &::after {
            content: "";
            position: absolute;
            display: block;
            border-color: transparent;
            border-style: solid;
            top: 1px;
            border-width: 0 12px 12px 12px;
            border-bottom-color: #fff;
        }

        &[data-align="left"] {
            transform: translateX(0);
            left: 10%;
        }

        &[data-align="center"] {
            transform: translateX(-50%);
            left: 50%;
        }

        &[data-align="right"] {
            transform: translateX(0);
            left: auto;
            right: 10%;
        }
    }
}