@charset "utf-8";

:host {
  display: inline-block;
  position: relative;
  --indent: 8px;
}

::slotted(material-drop) {
  position: absolute;
  /* transform: scaleY(0); */
  /* top: var(--indent);
  left: var(--indent); */
}

:host(:focus-within) ::slotted(material-drop) {
  /* transform: scaleY(1); */
}

/* #region [Layout] Положение подсказки @TODO: */
/* outset (default) */
:host ::slotted(material-drop), :host([y="top"]) ::slotted(material-drop) {
  top: calc(var(--indent));
}
:host([y="bottom"]) ::slotted(material-drop) {
  top: auto;
  bottom: var(--indent);
}
/*
:host([y="center"]) ::slotted(material-drop) {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

:host ::slotted(material-drop), :host([x="center"]) ::slotted(material-drop) {
  left: 50%;
  transform: translateX(-50%);
}*/
:host([x="left"]) ::slotted(material-drop) {
  left: auto;
  right: var(--indent);
  /* transform: none; */
}
/* :host([x="right"]) ::slotted(material-drop) {
  left: calc(100% + var(--indent));
  transform: none;
} */
/*
:host([x="center"][y="center"]) ::slotted(material-drop) {
  transform: translate(-50%, -50%);
}
:host([x="right"][y="center"]) ::slotted(material-drop),
:host([x="left"][y="center"]) ::slotted(material-drop) {
  transform: translate(0, -50%)
} */

/* OUTSET */
:host([outset]) ::slotted(material-drop), :host([outset][y="top"]) ::slotted(material-drop) {
  top: calc(100% + var(--indent));
  bottom: auto;
}
:host([outset][y="bottom"]) ::slotted(material-drop) {
  bottom: calc(100% + var(--indent));
  top: auto;
}
/*:host([outset][y="center"]) ::slotted(material-drop) {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

:host([outset][x="left"]) ::slotted(material-drop) {
  left: var(--indent);
  right: auto;
  // transform: none;
}
:host([outset][x="right"]) ::slotted(material-drop) {
  left: auto;
  right: var(--indent);
  // transform: none;
}

:host([outset][x="center"][y="center"]) ::slotted(material-drop) {
  transform: translate(-50%, -50%);
} */
/* #endregion */