@import 'common/animations';

.media-plugin {
    .results {
        position: relative;   // For the dropdown menu
        overflow: auto;
        @include calc(height, '100%');

        &.resize {
            @include calc(height, '100% - 16rem');
        }

        .active {
            @extend .active-glow;
            height: 4rem;
        }

        .empty {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            letter-spacing: .1rem;
            color: $empty-results-color;
        }

        .media-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: 1rem;
            padding: .5rem;

            &:nth-child(odd) { background: rgba(255, 255, 255, 0.0); }
            &:nth-child(even) { background: $default-bg-3; }
            &:hover { background: $hover-bg; }
            &.selected { background: $selected-bg; }
        }
    }
}