:root {
  --tabby-underline: #E7E0EB solid 1px;
  --tabby-width: 100%;
  --tabby-height: 48px;
  --tabby-tab-width: 100%;
  --tabby-tab-height: 100%;
  --tabby-tab-background-color: transparent;
  --tabby-tab-selected-background-color: #fee8e8;
  --tabby-tab-hover-background-color: #d6d6d64d;
  --tabby-tab-focus-background-color: #d6d6d64d;
  --tabby-tab-active-background-color: #d6d6d64d;
  --tabby-tab-color: #202124;
  --tabby-tab-selected-color: #bc1818;
  --tabby-tab-font-family: inherit;
  --tabby-tab-font-size: 14px;
  --tabby-tab-font-weight: 500;
  --tabby-tab-line-height: normal;
  --tabby-tab-radius: 6px 6px 0px 0px;
  --tabby-tab-padding-left: 20px;
  --tabby-tab-padding-right: 20px;
  --tabby-tab-padding: 0px var(--tab-span-padding-left) 0px var(--tab-span-padding-right);
  --tabby-tab-disabled-opacity: 0.4;
  --tabby-tab-border-color: transparent;
  --tabby-tab-selected-border-color: #bc1818;
  --tabby-tab-border-radius: 0px;
  --tabby-tab-border-width: 100%;
  --tabby-tab-border-height: 2.6px;
}

div.tabby {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: var(--tabby-height);
  width: var(--tabby-width);
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  border-bottom: var(--tabby-underline);
}

div.tabby[tabby-align="left"] {
  justify-content: flex-start;
}

div.tabby[tabby-align="center"] {
  justify-content: center;
}

div.tabby[tabby-align="right"] {
  justify-content: flex-end;
}


div.tabby button.tab {
  font-family: var(--tabby-tab-font-family);
  line-height: var(--tabby-tab-line-height);
  width: var(--tabby-tab-width);
  height: var(--tabby-tab-height);
  font-size: var(--tabby-tab-font-size);
  font-weight: var(--tabby-tab-font-weight);
  color: var(--tabby-tab-color);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: var(--tabby-tab-radius);
  margin: 0;
  padding: var(--tabby-tab-padding);
  background-color: var(--tabby-tab-background-color);
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  outline: none;
  border: none;
}

div.tabby button.tab:hover {
  background-color: var(--tabby-tab-hover-background-color);
}

div.tabby button.tab:focus {
  background-color: var(--tabby-tab-focus-background-color);
}

div.tabby button.tab:active {
  background-color: var(--tabby-tab-active-background-color);
}

div.tabby[tabby-width="full"] button.tab {
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
}

div.tabby[tabby-width="auto"] button.tab {
  width: fit-content;
  padding-left: var(--tabby-tab-padding-left);
  padding-right: var(--tabby-tab-padding-right);
}

div.tabby button.tab div.tab-border {
  overflow: hidden;
  border-radius: var(--tabby-tab-border-radius);
  min-height: var(--tabby-tab-border-height);
  max-height: var(--tabby-tab-border-height);
  min-width: var(--tabby-tab-border-width);
  max-width: var(--tabby-tab-border-width);
  background-color: var(--tabby-tab-border-color);
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;
  bottom: 0;
}

div.tabby button.tab[selected] div.tab-border {
  background-color: var(--tabby-tab-selected-border-color);
}

div.tabby button.tab:not([selected]) div.tab-border {
    background-color: var(--tabby-tab-border-color);
}

div.tabby button.tab[selected] {
  color: var(--tabby-tab-selected-color);
  background-color: var(--tabby-tab-selected-background-color);
}

div.tabby button.tab[disabled] {
  opacity: var(--tabby-tab-disabled-opacity);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

div.tabby button.tab[disabled]:hover,
div.tabby button.tab[disabled]:focus,
div.tabby button.tab[disabled]:active {
  background-color: transparent;
}