:host {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 100%) 1fr 1fr;

   /*@doc Define o z-index do componente.*/
   --snk-personalized-filter--z-index: var(--elevation--20, 20);
   /*@doc Define a cor de fundo do componente.*/
   --snk-personalized-filter--background-color: var(--background--xlight, #fff);
}

.snk-filter-bar__title {
  max-width: 260px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  font-family: var(--font-pattern, Arial);
  font-weight: var(--text-weight--large, 600);
  color: var(--color--title-primary, #2B3A54);
  margin-top: 12px;
}

:host([data-mode="hidden"]) {
  width: 0px;
  height: 0px;
}

:host([data-mode="button"]) {
  grid-template-columns: 1fr;
  width: fit-content;
}

.snk-filter__popover-container{
  /*private*/
  display: flex;
  cursor: auto;
}

.filter-bar__personalized-filter{
    /*private*/
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;

    /*public*/
    z-index: var(--snk-personalized-filter--z-index);
    background-color: var(--snk-personalized-filter--background-color);
}

.snk-filter__popover{
  /*private*/
  display: flex;
  flex-direction: column;
  position: absolute;
  width: fit-content;
  height: fit-content;
  min-width: 265px;

  /*public*/
  background-color: var(--background--xlight, #fff);
  border-radius: var(--border--radius-medium, 12px);
  box-shadow: var(--shadow, 0px 0px 16px 0px #000);

}

.snk-filter-item__editor-header{
  flex-grow: 1;
  font-weight: var(--text-weight--medium, 400);
  color: var(--color--title-primary, #2B3A54);
}

.snk-filter__popover-rule{
  border-style: solid;
  border-color: var(--color--disable-secondary, #F2F5F8);
  border-radius: 1px;
  border-width: 1px;
  width: 100%;
}

.editor__ez-check{
  --ez-check__label--padding-left: 0;
}

.snk-filter-item__editor-header-button{
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 3px;
  outline-color: var(--color--primary);
}

.snk-filter-bar__divider{
  margin-bottom: var(--space--small);
  height: 80%;
}

.snk-filter-bar__filter-item-container {
  display: flex;
  align-items: start;
  margin: var(--space--2, 2px) 0;
}

.snk-filter-bar__scroller :first-child {
  margin-left: var(--space-extra-small, 3px);
}


.snk-filter-bar__filter-list-items-container{
  overflow-y: auto;
  max-height: 360px;
  margin-top: var(--space--small, 6px);
}

.snk-filter-bar__filter-list-item{
  cursor: pointer;
  border-radius: var(--border--radius-small, 6px);
  border: none;
  background-color: transparent;
}

.snk-filter-bar__filter-list-item__label{
  color: var(--title--primary);
}

.snk-filter-bar__filter-list-item__label--secondary{
  color: var(--text--primary);
}

.snk-filter-bar__filter-list-item__icon{
  --ez-icon--color: var(--title--primary);
}

.snk-filter-bar__filter-list-item__icon--secondary{
  --ez-icon--color: var(--text--secondary);
}

.snk-filter-bar__filter-list-item:focus-visible {
  outline: none;
  background-color: var(--background--medium);
}

.snk-filter-bar__filter-list-item:hover{
  background-color: var(--background--medium);
}

.snk-filter-bar__filter-list-items-container--empty{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: center;
}

.snk-filter-bar__filter-list-items-button--active{
  position: relative;
}
.snk-filter-bar__filter-list-items-button--active::after{
  display: flex;
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  top: 7px;
  left: 17px;
  background-color: var(--icon--alert--color, #008561);
  border-radius: 50%;
}

.snk-filter-bar__filter-modal-item{
  --modal-item-border-width: 2px;
  display: flex;
  flex-direction: row;
  margin-left: var(--modal-item-border-width);
  border-radius: var(--border--radius-medium, 12px);
  background-color: var(--background--medium, #f0f3f7);
  border: none;
  width: 100%;

}

.snk-filter-bar__filter-modal-item:focus-visible{
  outline: var(--color--primary) solid var(--modal-item-border-width);
}

.snk-filter-bar__filter-modal-item__check{
  width: auto;
}
.snk-filter-bar__filter-modal-item__label{
  font-weight: var(--text-weight--medium);
}

.snk-filter-bar__filter-modal-content{
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: 99%;
  height: 100%;
}