html {
  box-sizing: border-box;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

:host {
  font-family: var(--c-font-family);
}

::-ms-reveal {
  display: none;
}

:host {
  /**
   * @prop --c-tab-buttons-background-color-active-hover: Active tab button hover background color
   * @prop --c-tab-buttons-background-color-active: Active tab button background color
   * @prop --c-tab-buttons-text-color-active: Active tab button text color
   */
  --_c-tab-buttons-background-color-active-hover: var(--c-tab-buttons-background-color-active-hover, var(--c-primary-400));
  --_c-tab-buttons-background-color-active: var(--c-tab-buttons-background-color-active, var(--c-primary-600));
  --_c-tab-buttons-text-color-active: var(--c-tab-buttons-text-color-active, var(--c-white));
  /**
   * @prop --c-tab-buttons-background-color-hover: Tab button hover background color
   * @prop --c-tab-buttons-background-color: Tab button background color
   * @prop --c-tab-buttons-border-color: Tab button border color
   * @prop --c-tab-buttons-text-color: Tab button text color
   */
  --_c-tab-buttons-background-color-hover: var(--c-tab-buttons-background-color-hover, var(--c-primary-200));
  --_c-tab-buttons-background-color: var(--c-tab-buttons-background-color, var(--c-white));
  --_c-tab-buttons-border-color: var(--c-tab-buttons-border-color, var(--c-primary-600));
  --_c-tab-buttons-text-color: var(--c-tab-buttons-text-color, var(--c-primary-600));
  /**
   * @prop --c-tab-buttons-background-color: Disabled tab buttons border color
   */
  --_c-tab-buttons-border-color-disabled: var(--c-tab-buttons-border-color-disabled, var(--c-tertiary-400));
  /**
   * @prop --c-tab-buttons-border-radius: Tab buttons border radius
   */
  --_c-tab-buttons-border-radius: var(--c-tab-buttons-border-radius, 4px);
  background-color: var(--_c-tab-buttons-border-color);
  border-radius: var(--_c-tab-buttons-border-radius);
  box-shadow: 0 0 0 2px var(--_c-tab-buttons-border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px;
}
:host ::slotted(c-button) {
  --c-button-background-color-hover: var(--_c-tab-buttons-background-color-active-hover);
  --c-button-background-color: var(--_c-tab-buttons-background-color-active);
  --c-button-text-color: var(--_c-tab-buttons-text-color-active);
  --_c-button-border-radius: 0;
  --_c-button-min-width: auto;
  --_c-button-padding: 0 8px;
  --_c-button-outline-offset: 4px;
  flex-grow: 1;
}
:host ::slotted(c-button.c-button--outlined) {
  --c-button-outlined-background-color-hover: var(--_c-tab-buttons-background-color-hover);
  --c-button-outlined-background-color: var(--_c-tab-buttons-background-color);
  --c-button-outlined-border-color: var(--_c-tab-buttons-border-color);
  --c-button-outlined-text-color: var(--_c-tab-buttons-text-color);
  box-shadow: none;
}
:host ::slotted(c-button.c-button--outlined)::before, :host ::slotted(c-button.c-button--outlined)::after {
  background-color: #ffffff;
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: background-color 0.3s ease-in-out;
  width: 100%;
  z-index: -1;
}
:host ::slotted(c-button.c-button--outlined):hover {
  background-color: var(--c-tab-button-background-color);
}
:host ::slotted(c-button:first-child) {
  --_c-button-border-radius: var(--_c-tab-buttons-border-radius) 0 0 var(--_c-tab-buttons-border-radius);
}
:host ::slotted(c-button:last-child) {
  --_c-button-border-radius: 0 var(--_c-tab-buttons-border-radius) var(--_c-tab-buttons-border-radius) 0;
}
:host ::slotted(*) {
  flex-grow: 1;
}

:host(.disabled) {
  --_c-tab-buttons-border-color: var(--_c-tab-buttons-border-color-disabled) !important;
  pointer-events: none;
}

:host(.c-tab-buttons) ::slotted(c-button:focus) {
  outline: none;
}
:host(.c-tab-buttons) ::slotted(c-button:focus-visible) {
  outline: 2px var(--_c-tab-buttons-border-color) solid;
  outline-offset: 4px;
  z-index: 1;
}