/*
    - Name: "tabs.scss"
    - Description: "Add custom styles to tabs component"
*/
.micon.iconXs {
  width: var(--sizeXs);
  height: var(--sizeXs);
}

.micon.iconSm {
  width: var(--sizeSm);
  height: var(--sizeSm);
}

.micon.iconMd {
  width: var(--sizeMd);
  height: var(--sizeMd);
}

.micon.iconLg {
  width: var(--sizeLg);
  height: var(--sizeLg);
}

.micon.iconXl {
  width: var(--sizeXl);
  height: var(--sizeXl);
}

.micon.icon2xl {
  width: var(--size2xl);
  height: var(--size2xl);
}

.component-tabs.tabs-horizontal .tabs-container,
.component-tabs.tabs-horizontal .content-container {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .component-tabs.tabs-horizontal .tabs-container,
  .component-tabs.tabs-horizontal .content-container {
    display: block;
  }
}
.component-tabs.tabs-horizontal .tabs-container {
  position: relative;
  margin: auto;
  overflow: hidden;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: var(--tabsTabContentBorderBottomWidth) var(--tabsTabContentBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
  margin: 0;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .arrow {
  cursor: pointer;
  padding: var(--spacingXs);
  display: none;
  top: 50%;
  background: none;
  border: none;
  font-size: 0;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .arrow.left-arrow {
  left: 0;
  border-right: var(--tagBorderWidth) var(--tagBorderStyle) var(--tabsTabContentBorderBottomColor);
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .arrow.right-arrow {
  right: 0;
  border-left: var(--tagBorderWidth) var(--tagBorderStyle) var(--tabsTabContentBorderBottomColor);
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  flex-grow: 1;
  scroll-behavior: smooth;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs::-webkit-scrollbar {
  display: none;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab {
  display: flex;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab a,
.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab button {
  text-align: center;
  padding: var(--spacingXs) var(--spacingSm);
  border-bottom: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) transparent;
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab a:focus, .component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab a:hover,
.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab button:focus,
.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab button:hover {
  border-bottom: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabActiveBorderBottomColor);
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab.active a,
.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab.active button {
  border-bottom: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabActiveBorderBottomColor);
}

.component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab a:focus, .component-tabs.tabs-horizontal .tabs-container .tabs-wrapper .tabs .tab a:focus-visible {
  outline: 2px solid var(--colorBlack);
  outline-offset: -2px;
}

.component-tabs.tabs-horizontal .content-container .content {
  display: none;
  padding: 0.625rem;
}

.component-tabs.tabs-horizontal .content-container .content.active {
  display: block;
}

.component-tabs.tabs-vertical {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.component-tabs.tabs-vertical .tabs-container,
.component-tabs.tabs-vertical .content-container {
  display: none;
}

@media all and (min-width: 50.0625rem) {
  .component-tabs.tabs-vertical .tabs-container,
  .component-tabs.tabs-vertical .content-container {
    display: block;
  }
}
.component-tabs.tabs-vertical .tabs-container {
  width: 30%;
  margin-right: -0.0625rem;
  padding-bottom: var(--spacingMd);
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper {
  margin: 0;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .arrow {
  display: none;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab a,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab button {
  display: flex;
  padding: var(--spacingXs) var(--spacingSm);
  border-left: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) transparent;
  border-top: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) transparent;
  border-bottom: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) transparent;
  width: 100%;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab a:focus, .component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab a:hover,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab button:focus,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab button:hover {
  position: relative;
  border-left: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabActiveBorderBottomColor);
  border-top: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
  border-bottom: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child a,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child button {
  border-top: none;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child a:focus, .component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child a:hover,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child button:focus,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab:first-child button:hover {
  border-top: none;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active {
  position: relative;
  z-index: 2;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active::after {
  content: "";
  display: block;
  background: var(--colorWhite);
  width: var(--spacing3xs);
  height: calc(100% - 2px);
  position: absolute;
  top: 1px;
  right: -1px;
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active a,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active button {
  border-left: var(--tabsTabDefaultBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabActiveBorderBottomColor);
  border-top: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
  border-bottom: var(--tabsTabListBorderBottomWidth) var(--tabsTabDefaultBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
}

.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active:first-child a,
.component-tabs.tabs-vertical .tabs-container .tabs-wrapper .c-tablist .tab.active:first-child button {
  border-top: none;
}

.component-tabs.tabs-vertical .content-container {
  width: 70%;
  border-left: var(--tabsTabContentBorderBottomWidth) var(--tabsTabContentBorderBottomStyle) var(--tabsTabContentBorderBottomColor);
  position: relative;
}

.component-tabs.tabs-vertical .content-container .c-tabs-item {
  display: none;
}

.component-tabs.tabs-vertical .content-container .c-tabs-item.active {
  display: block;
}

.component-tabs .heading {
  width: 100%;
}

.component-tabs .tab.active {
  pointer-events: none;
}

.component-tabs .tab a,
.component-tabs .tab button {
  font-family: var(--largeBoldFontFamily), sans-serif;
  font-size: var(--largeBoldFontSize);
  font-weight: var(--largeBoldFontWeight);
  line-height: var(--largeBoldLineHeight);
  color: var(--color--black);
  text-decoration: none;
  cursor: pointer;
  background: var(--colorWhite);
  border: none;
}

.component-tabs .accordion {
  display: block;
  width: 100%;
}

@media all and (min-width: 50.0625rem) {
  .component-tabs .accordion {
    display: none;
  }
}
.component-tabs .accordion .accordion-item {
  border-bottom: 1px solid #A6A6A6;
}

@media all and (max-width: 50.0625rem) {
  .component-tabs .accordion .tab {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #A6A6A6;
    padding: 0.625rem;
    background: var(--colorWhite);
    cursor: pointer;
  }
}
.component-tabs .accordion .tab a,
.component-tabs .accordion .tab button {
  text-align: left;
  flex: 1;
}

.component-tabs .accordion .tab .micon {
  transition: all 0.2s ease;
}

.component-tabs .accordion .tab.active {
  border-top: 2px solid #8C8C8C;
  pointer-events: none;
}

.component-tabs .accordion .tab.active .micon {
  transform: rotate(180deg);
}

@media all and (max-width: 50.0625rem) {
  .component-tabs .accordion .content {
    display: none;
    padding: 0.625rem;
  }
  .component-tabs .accordion .content.active {
    display: block;
  }
}