@zohodesk/components/es/Tab/Tabs.module.css

In this Package, we Provide Some Basic Components to Build Web App

.tab {
  position: relative;
  z-index: 1;
  --tab_position_gap: 22px;
}

.alpha {
  height: var(--zd_size35) ;
  background-color: var(--zdt_tabs_alpha_bg);
}

[dir=ltr] .alpha_padding {
  padding-left: var(--zd_size15) ;
}

[dir=rtl] .alpha_padding {
  padding-right: var(--zd_size15) ;
}

.alpha_border {
  border-width: 0 0 1px 0;
  border-color: var(--zdt_tabs_alpha_border);
  border-style: solid;
}

.alpha::after {
  content: '';
  position: absolute;
  z-index: -2;
  width: 76% ;
  bottom: 0 ;
  height: var(--zd_size10) ;
  border-radius: 100px / 5px;
  box-shadow: var(--zd_bs_tabs_shadow);
}

[dir=ltr] .alpha::after {
  left: 12% ;
}

[dir=rtl] .alpha::after {
  right: 12% ;
}

.alpha:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100% ;
  height: 100% ;
  top: 0 ;
  background: inherit;
}

[dir=ltr] .alpha:before {
  left: 0 ;
}

[dir=rtl] .alpha:before {
  right: 0 ;
}

.beta {
  height: var(--zd_size61) ;
  background-color: var(--zdt_tabs_alpha_bg);
}

[dir=ltr] .beta_padding {
  padding-left: var(--zd_size13) ;
}

[dir=rtl] .beta_padding {
  padding-right: var(--zd_size13) ;
}

.beta_border {
  border-bottom: 1px solid var(--zdt_tabs_alpha_border);
}

.delta {
  height: var(--zd_size35) ;
  background-color: var(--zdt_tabs_alpha_bg);
}

[dir=ltr] .delta_padding {
  padding-left: var(--zd_size10) ;
}

[dir=rtl] .delta_padding {
  padding-right: var(--zd_size10) ;
}

.delta_border {
  border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
}

.delta .highlight {
  border-color: var(--zdt_tabs_delta_border);
}

.maxWidth {
  max-width: 100% ;
}

.highlight {
  position: absolute;
  bottom: 0 ;
  border-bottom: 1px solid var(--zdt_tabs_highlight_border);
}

.lineAnimate {
  transition: transform var(--zd_transition3) linear;
}

.menu {
  position: relative;
  cursor: pointer;
}

.menuBox {
  max-height: var(--zd_size220) ;
}
.bottomRightToLeft,
.topRightToLeft,
.bottomCenterToLeft {
  right: calc(var(--tab_position_gap) * -1);
}

.bottomLeftToRight,
.topLeftToRight,
.bottomCenterToRight {
  left: calc(var(--tab_position_gap) * -1);
}

.hidden {
  visibility: hidden;
}

.search {
  padding: var(--zd_size6) var(--zd_size20) 0 ;
}

.emptyStateContainer {
  padding-bottom: var(--zd_size15) ;
}

.emptyStateTitle {
  font-family: var(--zd_semibold);
  word-wrap: break-word;
  font-size: var(--zd_font_size16) ;
  max-width: var(--zd_size430) ;
  text-align: center;
}

[dir=ltr] .emptyStateTitle {
  margin-left: auto ;
  margin-right: auto ;
}

[dir=rtl] .emptyStateTitle {
  margin-right: auto ;
  margin-left: auto ;
}

.listWrapper {
  padding: var(--zd_size10) 0 ;
}