:host {
  outline: none;
  /**
  * @prop --tab-height: Controls the height of each tab header
  */
  --tab-height: 2.5rem;
  /**
  * @prop --tab-margin: Controls the margin around each tab header
  */
  --tab-margin: 0 0 0 0;
  /**
  * @prop --tab-margin: Controls the margin around each tab header
  */
  --tab-padding: 1rem;
  /**
  * @prop --tab-radius: Controls the radius around each tab header
  */
  --tab-radius: 4px;
  /**
  * @prop --tab-border-radius: Controls the border size around each tab header
  */
  --tab-border-size: 0.125rem;
  /**
  * @prop --tab-border-size-selected: Controls the border size when a tab header is selected
  */
  --tab-border-size-selected: 0.25rem;
  /**
  * @prop --tab-border-size-selected: Controls the border color around each tab header
  */
  --tab-border-color: hsl(0, 0%, 80%);

  /**
  * @prop --font-family: Controls the font type used
  */
  --font-family: inherit;
  /**
  * @prop --font-weight: Controls the font weight
  */
  --font-weight: 700;
  /**
  * @prop --color-hover: Controls the tabs color shown on hover
  */
  --color-hover: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --color-selected: Controls the tabs color shown when selected
  */
  --color-selected: hsl(259.5, 100%, 50%);
  /**
  * @prop --background-underline-hover: Controls the tabs color of underline on hover
  */
  --background-underline-hover: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --background-underline-active: Controls the tabs color of the underline when active
  */
  --background-underline-active: hsl(196.10000000000002, 100%, 51%);
  /**
  * @prop --color-active: Controls the tabs text color when active
  */
  --color-active: hsl(196.10000000000002, 100%, 51%);
  /**
  * @prop --box-shadow-focus: Controls the tabs box shadow applied when element has focus
  */
  --box-shadow-focus: 0 0 0 0.125rem hsl(215.60000000000002, 100%, 62%);
  /**
  * @prop --color-disabled: Controls the tabs text color when disabled
  */
  --color-disabled: hsl(0, 0%, 80%);
  /**
  * @prop --background-disabled: Controls the tabs background color when disabled
  */
  --background-disabled: #c6c6c6;

  /**
  * @prop --panel-margin: Controls the margin-top applied to the panel
  */
  --panel-margin: 1.5rem 0 0 0;
}

::slotted(:not([data-selected])) {
  display: none;
}

.dxp-tabs-label {
  cursor: pointer;
  display: inline-flex;
  outline: none;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  padding-left: 0;
  height: var(--tab-height);
  margin: var(--tab-margin);
  padding: var(--tab-padding);
  font-family: var(--font-family);
  font-size: calc(var(--tab-height) / 2);
  font-weight: var(--font-weight);
  border-radius: var(--tab-radius);
}

.dxp-tabs-label--disabled {
  color: var(--color-disabled);
  background-color: var(--background-disabled);
  cursor: not-allowed;
}
.dxp-tabs-label--disabled:active {
  color: var(--color-disabled);
}
.dxp-tabs-label--disabled:hover {
  color: var(--color-disabled) !important;
}
.dxp-tabs-label--disabled:hover:after {
  background-color: var(--color-disabled) !important;
}

.dxp-tabs-label:after {
  left: 0;
  right: 0;
  width: 100%;
  bottom: 0;
  content: '';
  display: block;
  position: absolute;
  height: var(--tab-border-size);
  background-color: var(--tab-border-color);
}
.dxp-tabs-label:before {
  left: 0;
  right: 0;
  width: 100%;
  bottom: 0;
  height: 0;
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  border-top: 1px solid transparent;
}

.dxp-tabs-label:hover {
  color: var(--color-hover);
}
.dxp-tabs-label:hover:after {
  background-color: var(--background-underline-hover);
}

.dxp-tabs-label:active {
  color: var(--color-active);
}
.dxp-tabs-label:active:after {
  background-color: var(--background-underline-active);
}

.dxp-tabs-label:focus {
  box-shadow: var(--box-shadow-focus);
}

.dxp-tabs-label--selected {
  color: var(--color-selected);
}
.dxp-tabs-label--selected:after {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: var(--tab-border-size-selected);
  background-color: var(--color-selected);
}
.dxp-tabs-label--selected:before {
  border-top: var(--tab-border-size-selected) solid transparent;
}

.dxp-tab-panel {
  /* we use `margin` and top padding because we want to allow "margin collapse" */
  /* @see https://web.dev/learn/css/spacing/#margin-collapse */
  margin: var(--panel-margin);
}