@panelColorsFallback: rgb(30 30 30);
@panelColors        : rgb(30 30 30 / 45%);

.menu-panel {
    .menu-panel-body {
        background-color: @panelColors;
        backdrop-filter : blur(32px) saturate(180%);

        &.menu-panel-body-down {
            animation: menuInDown .10s var(--appleEase);
        }

        &.menu-panel-body-up {
            animation: menuInUp .10s var(--appleEase);
        }
        
    }

    @keyframes menuInUp {
        0% {
            opacity   : 0;
            transform : translateY(-10px) translate3d(0,0,0);
            background: @panelColorsFallback;
        }

        100% {
            opacity   : 1;
            transform : translateY(0);
            background: @panelColors;
        }
    }

    @keyframes menuInDown {
        0% {
            opacity   : 0;
            transform : translateY(10px) translate3d(0,0,0);
            background: @panelColorsFallback;
        }

        100% {
            opacity   : 1;
            transform : translateY(0);
            background: @panelColors;
        }
    }

}

.cd-mediaitem-square {
  --transition: width 1s, height 1s;
  transition: var(--transition);
  .artwork {
    transition: var(--transition);
  }
}

.cd-mediaitem-square:not(.mediaitem-card) {
    transition      : transform .2s var(--appleEase);
    transition-delay: .1s;
    padding         : 12px;

    // background-color: red;
    height: 220px;


    .artwork-container {}

    .info-rect {}

    .artwork-container,
    .info-rect {
        transition      : transform .22s var(--appleEase);
        transition-delay: .05s;
    }

    &:hover {
        .artwork-container {
            transform       : scale(1.1);
            transition      : transform .1s var(--appleEase);
            transition-delay: 0s;
            transform-origin: center;
        }


        .info-rect {
            z-index         : 1;
            transition      : transform .1s var(--appleEase);
            transition-delay: 0s;
            transform       : translateY(8px) translate3d(0,0,0);
        }
    }

    &:active {

    }
}

.wpfade_transform-enter-active,
.wpfade_transform-leave-active {
  --transitionTime: 0.2s;
  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
  will-change: opacity, transform;
}

.wpfade_transform-enter {
  opacity: 0;
  transform: translateX(50%) translate3d(0,0,0);
  will-change: opacity, transform;
}
.wpfade_transform-leave-to {
  opacity: 0;
  transform: translateX(-50%) translate3d(0,0,0);
  will-change: opacity, transform;
}


.wpfade_transform_backwards-enter-active,
.wpfade_transform_backwards-leave-active {
  --transitionTime: 0.2s;
  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
}

.wpfade_transform_backwards-enter {
  opacity: 0;
  transform: translateX(-50%) translate3d(0,0,0);
  will-change: opacity, transform;
}
.wpfade_transform_backwards-leave-to {
  opacity: 0;
  transform: translateX(50%) translate3d(0,0,0);
  will-change: opacity, transform;
}