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

.mie.select {
  box-sizing: border-box;
  position: relative;
  margin: 0;

  min-width: mvar("select.mw");

  // Show outline when focused
  &.opened,
  &:focus {
    > .content {
      > .base {
        outline-width: 0.2rem;
      }
    }
  }

  > .content {
    height: mvar("select.h");
    box-sizing: border-box;
    position: relative;
    width: 100%;
  }

  > .menu {
    background-color: mvar("select.bg.main");
    transition: height 0.3s ease;
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
  }
}
