@keyframes activate {
  0% {
    clip-path: inset(calc(100% - 3px) 50% 0px 50%);
  }

  100% {
    clip-path: inset(calc(100% - 3px) 0px 0px 0px);
  }
}

:host {
  display: flex;
  position: relative;
  width: 100%;
  /* border-bottom: 2px solid #dce0e8; */
  overflow: hidden;
  /* @doc Define a sombra do box da aba. */
  /* --tabselector__box--box-shadow: var(--shadow, 0px 0px 8px 0px #000); */
  /*@doc Contém o ícone de voltar para a aba anterior.*/
  --tabselector--backward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
  /*@doc Contém o ícone de avançar para a aba posterior.*/
  --tabselector--forward-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
}

.scroll {
  display: flex;
  width: 100%;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
}

.scroll.startHidden {
  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px);
}

.scroll.middle {
  -webkit-mask-image: linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px));
}

.scroll.endHidden {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px));
}

.tab {
  display: flex;
  border: none;
  background-color: unset;
  min-width: 100px;
  max-width: 260px;
  cursor: pointer;
  padding: 6px 12px;
  align-items: center;
  justify-content: center;
  color: var(--text--primary, #626e82);
  font-family: var(--font-pattern, "Roboto");
  font-size: var(--title--small, 14px);
  flex-shrink: 0;
  margin-bottom: var(--space--extra-small, 3px);
}

.tab:focus, .forward-button, .backward-button {
  outline: none;
}

.is-active {
  position: relative;
  color: var(--color--primary, #008561);
}

.is-active ez-icon {
  --ez-icon--color: var(--color--primary, #008561);
}

.is-active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color--primary, #008561);
  clip-path: inset(calc(100% - 3px) 0px 0px 0px);
  animation: activate 0.25s ease-in-out;
}

.is-focused {
  border: 1px dashed var(--color--primary, #000000c5);
}

.tab-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: var(--text-shadow);
}

.forward-button, .backward-button {
  position: absolute;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  top: 0px;
  right: 0px;
  width: 16px;
  height: 100%;
  border: none;
  background-color: unset;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.backward-button {
  left: 0px;
}

.forward-button::after, .backward-button::after {
  content: '';
  display: flex;
  background-color: var(--text--primary, #008561);
  width: 10px;
  height: 16px;
}

.forward-button::after {
  -webkit-mask-image: var(--tabselector--forward-icon);
  mask-image: var(--tabselector--forward-icon);
}

.backward-button::after {
  -webkit-mask-image: var(--tabselector--backward-icon);
  mask-image: var(--tabselector--backward-icon);
}

.forward-button:hover::after, .backward-button:hover::after {
  background-color: var(--color--primary, #4e4e4e);
}

.hidden {
  display: none;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.left-icon {
  padding-right: var(--space--small);
}

.right-icon {
  padding-left: var(--space--small);
}