:host {
  /*private*/
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  width: 100%;

  /*public*/
  /*@doc Define a cor de fundo do header do componente.*/
  --ez-grid__header--background-color: var(--background--xlight, #FFF);
  /*@doc Define o z-index do componente selection counter.*/
  --ez-grid__selection-counter--z-index: var(--visible, 1);
  /*@doc Define o sombreamento usado como borda.*/
  --ez-grid__container--shadow: var(--shadow);
  /*@doc Define altura mínima da grid */
  --ez-grid--min-height: 300px;
  /*@doc Define o outline usado como borda.*/
  --ez-grid__container--shadow--outline: var(--shadow--outline) var(--color--strokes);
  /*@doc Define a sombra do header.*/
  --ez-grid__header--shadow: var(--shadow--xsmall);
  /*@doc Define o outline usado como borda do header.*/
  --ez-grid__header--shadow--outline: var(--shadow--outline) var(--color--strokes);
  /*@doc Define o outline do header.*/
  --ez-grid__header--outline: none;
  /*@doc Define a borda do header.*/
  --ez-grid__header--border: none;

  min-height: var(--ez-grid--min-height);
}

.grid-header {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-row-start: 1;
  grid-template-columns: 1fr;
  background-color: var(--ez-grid__header--background-color, #FFF);
}

.grid-header.shadow-mode {
  box-shadow: var(--ez-grid__header--shadow);
  border: var(--ez-grid__header--border);
  outline: var(--ez-grid__header--outline);
}

.grid-header.outline-mode {
  box-shadow: var(--ez-grid__header--shadow--outline);
  border: var(--ez-grid__header--border);
  outline: var(--ez-grid__header--outline);
}

.header-overlay {
  padding-top: 15px;
  margin-top: -12px;
}

.grid__container {
  /*private*/
  outline: none;

  /*public*/
  box-shadow: var(--ez-grid__container--shadow);
  background-color: var(--ez-grid__header--background-color);
  border: var(--border--small) var(--color--strokes);
  border-radius: var(--border--radius-small);
}

.grid__container.no-scroll{
  width: 100vw;
}

:host(:not([no-header])) .grid__container {
  border: none;
}

.grid__container.outline-mode {
  /*public*/
  box-shadow: var(--ez-grid__container--shadow--outline);
  border: none;
  outline: none;
}

.grid-header__popover {
  position: relative;
  top: var(--space--sm, 16px);
}

.grid-header__container {
  /*private*/
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
}

.grid-header__position {
  /*private*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid__selection-counter {
  /*private*/
  position: fixed;
  white-space: nowrap;
  transform: translate(-50%, 0px);
  left: 50%;
  opacity: 0;
  bottom: -100%;
  transition: opacity 0.1s, bottom 0.5s;
}

.grid__selection-counter--opened {
  /*private*/
  opacity: 1;
  bottom: 0px;
}

.grid__btn-close {
  /*private*/
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
  width: 20px;
  height: 20px;
  border: none;
  background-color: unset;
  cursor: pointer;
}

.grid__btn-clear {
  /*public*/
  --ez-button--link-color: var(--color--alert-warning-900, #8C6B00);
  --ez-button--link--hover-color: var(--color--alert-warning-900, #8C6B00);
}

:host[no-header] .grid-header {
  height: 0;
  padding: 0;
}

.grid-header__pagination{
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-shrink: 1;
  flex-grow: 1;
}

.grid-header__pagination-label {
  width: 100%;
  white-space: nowrap
}

.overflowed {
  display: none;
}

.pagination-contracted {
  width: 100px;
}

.pagination-expanded{
  min-width: 150px;
}

.left__header-contracted {
  width: auto;
}

.left__header-expanded{
  flex-grow: 1;
}

.grid__footer{
  background-color: var(--background--xlight, #FFF);
  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
  box-shadow: var(--shadow--small);
}

.cancel-pagination{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px;
  width: 180px;
}

.cancel-pagination-btn{
  color: var(--color--error);
  font-size: var(--text--medium);
  font-weight: var(--text-weight--large);
  font-family: var(--font-pattern, Roboto);
  text-wrap: nowrap;
  cursor: pointer;
}

.spin {
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}