@use "../../variables";
@use "../../utils" as *;

.mie.select {
  > .menu {
    // prettier-ignore
    background-image:
      linear-gradient(
          mvar("select.bg.overlay"),
          mvar("select.bg.overlay")
      ),
      linear-gradient(
          mvar("select.bg.menu"),
          mvar("select.bg.menu")
      );

    transition:
      opacity 0.2s ease,
      height 0.3s ease,
      top 0.2s ease;

    border-radius: mvar("select.rounded");
    overflow: hidden;
    opacity: 0;

    position: absolute;
    user-select: none;
    height: 0;
    top: 0;

    z-index: 15;

    &.opened {
      top: calc(#{mvar("select.h")} + #{mvar("select.menu.offset")});
      min-height: mvar("select.menu.h");
      overflow-y: auto;
      opacity: 1;
    }
  }
}
