/**
 * Mixin for dropdown. Dropdown js logic is based on flyout.ts component.
 */
@mixin dropdown() {
    $root: &;
    position: relative;

    &__trigger {
        position: relative;
    }

    &__content {
        opacity: 0;
        transition-timing-function: ease;
        transition-duration: 0.35s;
        transition-property: opacity;
        visibility: hidden;
        background-clip: padding-box;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 5;

        &--transitioning {
            opacity: 0;
            visibility: visible;
        }

        &--in {
            opacity: 1;
            visibility: visible;
            transition-property: opacity, max-height;
        }

        &--out {
            opacity: 0;
            visibility: hidden;
        }

        &--only-mobile {
            @include media('>=tablet') {
                opacity: 1;
                visibility: visible;
            }

            #{$root}--transitioning {
                opacity: 0;
                visibility: visible;
                @include media('>=tablet') {
                    opacity: 1;
                    visibility: visible;
                }
            }

            #{$root}--in {
                opacity: 1;
                visibility: visible;
                transition-property: opacity, max-height;
            }

            #{$root}--out {
                opacity: 0;
                visibility: hidden;
                @include media('>=tablet') {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
}