:host {

  /* box */
  /*@doc Define o raio da borda do popover.*/
  --ez-popover__box--border-radius: var(--border--radius-medium, 12px);
  /*@doc Define a sombra do popover.*/
  --ez-popover__box--box-shadow: var(--shadow, 0px 0px 16px 0px #000);
  /*@doc Define a cor de fundo do popover.*/
  --ez-popover__box--background-color: var(--background--xlight, #fff);
  /*@doc Define a camada de visibilidade do popover.*/
  --ez-popover__box--z-index: var(--elevation--100, 100);
  /*@doc Define a camada de visibilidade do popover overlay.*/
  --ez-popover__box--overlay-z-index: var(--elevation--24, 24);
  /***************
     host style  
  ***************/
  /*private*/
  position: relative;
  display: flex;
  user-select: none;
}

.popover__overlay {
  display: none;
  position: fixed;
  padding: 0;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  z-index: var(--ez-popover__box--overlay-z-index);
}

.popover__overlay--light {
  background-color: rgba(var(--rgb-background--overlay), var(--opacity--bright)); 
}

.popover__overlay--medium {
  background-color: rgba(var(--rgb-background--overlay), var(--opacity--soft));
  backdrop-filter: blur(var(--background-blur--medium)); 
}

.popover__box {
  /*private*/
  display: none;
  position: fixed;
  top: 0;
  left: 0;

  z-index: var(--ez-popover__box--z-index);
  flex-direction: column;

  height: fit-content;

  /*public*/
  background-color: var(--ez-popover__box--background-color);
  border-radius: var(--ez-popover__box--border-radius);
  box-shadow: var(--ez-popover__box--box-shadow);
}

.popover__box--fit-content {
  width: fit-content;
}

.popover__box--full-width {
  width: calc(100% - 10px);
}