@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";

$inScale: scale3d(0.9, 0.9, 0.9);
$outScale: scale3d(1, 1, 1);
.one-ui-dropdown {
    $root: &;
    position: relative;
    box-sizing: border-box;

    * {
        box-sizing: inherit;
    }

    @include setMargin();
    @include setFlex();

    &__menu {
        //z-index: 1001 !important;
        z-index: var(--one-ui-dropdown-z-index);
        position: absolute;
        //display: none;
        opacity: 0;
        pointer-events: none;
        margin: 8px 0;
        transform: $inScale;
        //transform: scale3d(0.8,0.8,0);
        transition:
            transform .3s cubic-bezier(0.01, 0.63, 0.02, 1),
            opacity 0.03s ease-in;

        &-wrapper {
            overflow: hidden;

        }

        .one-ui-divider {
            width: calc(100% + 32px);
            margin-left: -16px;
        }

        &--open {
            //display: block;
            opacity: 1;
            pointer-events: all;
            transition:
                transform .3s cubic-bezier(0.01, 0.63, 0.02, 1),
                opacity .1s cubic-bezier(0.01, 0.63, 0.02, 1);
        }

        &--position {
            &-bottom-left {
                top: 100%;
                left: 0;
                transform-origin: top left;

                &#{$root}__menu--open {
                    transform: $outScale;
                }
            }

            &-bottom-center {
                top: 100%;
                left: 50%;
                transform: translate3d(-50%, 0, 0) $inScale;
                transform-origin: top center;

                &#{$root}__menu--open {
                    transform: translate3d(-50%, 0, 0) $outScale;
                }
            }

            &-bottom-right {
                top: 100%;
                right: 0;
                transform-origin: top right;

                &#{$root}__menu--open {
                    transform: $outScale;
                }
            }

            &-top-left {
                bottom: 100%;
                left: 0;
                transform-origin: bottom left;

                &#{$root}__menu--open {
                    transform: $outScale;
                }
            }

            &-top-center {
                bottom: 100%;
                left: 50%;
                transform: translate3d(-50%, 0, 0) $inScale;
                transform-origin: bottom center;

                &#{$root}__menu--open {
                    transform: translate3d(-50%, 0, 0) $outScale;
                }
            }

            &-top-right {
                bottom: 100%;
                right: 0;
                transform-origin: bottom right;

                &#{$root}__menu--open {
                    transform: $outScale;
                }
            }
        }
    }


    &__trigger {
        cursor: pointer;
    }

    &--menu-mode {
        #{$root}__menu {
            width: 100%;
        }
    }
    &__menu {
        width: 100%;
        box-shadow: 0px 4px 16px color(dark, 1, .25);
        border-radius: 8px;

        &--type {
            &-primary {
                background-color: color(white);
            }

            &-secondary {
                background-color: color(dark);
            }
        }
        .one-ui-button__content {
            font-size: 13px;
        }
    }

  &--fullWidth {
    width: 100%;
  }
}