[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --focus-ring: The focus ring's box shadow.
 */
:host {
  display: inline-block;
  --flow-color-base: var(--flow-color-primary, #389DFF);
  --flow-color-base-rgb: var(--flow-color-primary-rgb, 56, 157, 255);
  --flow-color-contrast: var(--flow-color-primary-contrast, #ffffff);
  --flow-color-contrast-rgb: var(
    --flow-color-primary-contrast-rgb,
    255, 255, 255
  ) !important;
  --flow-color-shade: var(--flow-color-primary-shade, #2d7ecc);
  --flow-color-tint: var(--flow-color-primary-tint, #60b1ff);
  --color: var(--flow-color-step-600, #666666);
  --active-color: var(--flow-color-base);
  --focus-ring: var(--flow-input-focus-ring-box-shadow, 0 0 0 3px rgba(var(--flow-color-base-rgb), 0.3));
}

.tab {
  font-family: var(--flow-font-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
  font-size: var(--flow-font-size-small, 0.875rem);
  font-weight: var(--flow-font-weight-semibold, 500);
  border-radius: 4px;
  color: var(--color);
  padding: 16px 20px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: var(--flow-transition-fast, 150ms) box-shadow, var(--flow-transition-fast, 150ms) color;
}
.tab:hover:not(.tab--disabled) {
  color: var(--active-color);
}
.tab:focus {
  outline: none;
}
.tab:focus:not(.tab--disabled) {
  color: var(--active-color);
  box-shadow: var(--focus-ring);
}
.tab.tab--active:not(.tab--disabled) {
  color: var(--active-color);
}
.tab.tab--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}