:host {
  display: flex;
  outline: none;
  opacity: 1;
  cursor: pointer;
}

:host(:hover:not([disabled]:not([disabled=false]))) {
  --r-tab--background: var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));
}

:host(:active:not([disabled]:not([disabled=false]))) {
  --r-tab--background: var(--r-background-interactive-pressed, rgba(40,40,40,0.12));
}

:host(:focus-visible) {
  --r-tab--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
  --r-tab--outline: 2px solid var(--r-border-focused, #0071e3);
  --r-tab--outline-offset: 2px;
}

:host([active]:not([active=false])) {
  cursor: default;
  --r-tab--font-weight: var(--r-font-weight-semibold, 600);
  --r-tab--marker--visibility: visible;
}

:host([disabled]:not([disabled=false])) {
  cursor: not-allowed;
  --r-tab--pointer-events: none;
  --r-tab--color: var(--r-text-soft, #686868);
  --r-tab--marker--background-color: var(--r-border-soft, #686868) ;
}

.r-tab {
  position: var(--r-tab--position, relative);
  font-family: var(--r-tab--font-family, var(--r-font-family-text, system-ui));
  font-weight: var(--r-tab--font-weight, var(--r-font-weight-regular, 400));
  font-size: var(--r-tab--font-size, var(--r-font-size-400, 1rem));
  line-height: var(--r-tab--line-height, var(--r-line-height-m, 1.5));
  cursor: var(--r-tab--cursor, inherit);
  pointer-events: var(--r-tab--pointer-events, initial);
  display: var(--r-tab--display, flex);
  align-items: var(--r-tab--align-items, center);
  justify-content: var(--r-tab--justify-content, center);
  gap: var(--r-tab--gap, var(--r-spacing-050, 0.5rem));
  width: var(--r-tab--width, auto);
  padding-top: var(--r-tab--padding-top, var(--r-spacing-025, 0.25rem));
  padding-right: var(--r-tab--padding-right, var(--r-spacing-050, 0.5rem));
  padding-bottom: var(--r-tab--padding-bottom, var(--r-spacing-100, 1rem));
  padding-left: var(--r-tab--padding-left, var(--r-spacing-050, 0.5rem));
  margin-bottom: var(--r-tab--margin-bottom, -1px);
  opacity: var(--r-tab--opacity, 1);
  background: var(--r-tab--background, none);
  color: var(--r-tab--color, var(--r-text-regular, #282828));
  border: var(--r-tab--border, none);
  box-shadow: var(--r-tab--box-shadow, none);
  outline: var(--r-tab--outline, none);
  outline-offset: var(--r-tab--outline-offset, 0);
}
.r-tab::after {
  content: var(--r-tab--marker--content, "");
  width: var(--r-tab--marker--width, 100%);
  height: var(--r-tab--marker--height, 3px);
  position: var(--r-tab--marker--position, absolute);
  bottom: var(--r-tab--marker--bottom, 0);
  left: var(--r-tab--marker--left, 0);
  visibility: var(--r-tab--marker--visibility, hidden);
  background-color: var(--r-tab--marker--background-color, var(--r-border-regular, #282828));
  transition: var(--r-tab--marker--transition, all 0.1s ease-in);
}
.r-tab--disabled-icon,
.r-tab ::slotted([slot=icon]) {
  color: var(--r-tab--icon--color, var(--r-icon-soft, #686868));
}

@media (prefers-reduced-motion) {
  .r-tab::after {
    transition: none;
  }
}