.cooDropdown{
    display: inline-block;
    position: relative;
    &-menu{
        display: inline-block;
    }
    &-panel{
        position: fixed;
        background-color: $white;
        box-shadow: 0 0 4px #d9d9d9;
        border: 1px solid #dddddd;
        transform-origin: 0 0;
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
        animation-name: cooDropdownSlideUpIn;
        &--hidden{
            display: none;
        }
    }
    &-arrow{
        position: absolute;
        height: 8px;
        width: 8px;
        border-top: 1px solid #dddddd;
        border-left: 1px solid #dddddd;
        box-shadow: -2px -1px 4px #d9d9d9;
        transform: rotate(45deg);
        left: 50%;
        top: 0%;
        margin-top: -5px;
        margin-left: -5px;
        background-color: #ffffff;
    }
}


.slideUp {
    &-enter{
        animation-duration: .5s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
        animation-name: cooDropdownSlideUpIn;
    }

    &-exit{
        animation-duration: .5s;
        animation-fill-mode: both;
        opacity: 1;
        animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
        animation-name: cooDropdownSlideUpOut;
    }
}