.varClass {
  --borderColor: var(--zdt_subtablayout_border);
}

.tabHead,
.shadowStyle {
  position: relative;
  composes: varClass;
}

.tabHead, .shadowStyle {
  background: var(--zdt_subtablayout_tabhead_bg);
}

.left {
  margin-inline-end: var(--zd_size15) ;
}

.plusIconLine {
  position: relative;
  z-index: 2;
}

.plusIconLine::before {
  position: absolute;
  content: '';
  width: var(--zd_size1) ;
  height: var(--zd_size28) ;
  top: var(--zd_size38) ;
  z-index: -1;
  background: var(--zdt_subtablayout_plusicon_bg);
}

[dir=ltr] .plusIconLine::before {
  left: var(--zd_size20) ;
}

[dir=rtl] .plusIconLine::before {
  right: var(--zd_size20) ;
}

.primary_borderStyle, .secondary_borderStyle {
  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
}

.tertiary_borderStyle {
  border-bottom: 1px solid var(--borderColor);
}

.shadowStyle::before {
  bottom: 0 ;
  content: '';
  position: absolute;
  top: var(--zd_size20) ;
  z-index: -1;
  box-shadow: var(--zd_bs_subtablayout_shadow);
  border-radius: 100px/10px;
}

[dir=ltr] .shadowStyle::before {
  left: var(--zd_size50) ;
  right: var(--zd_size50) ;
}

[dir=rtl] .shadowStyle::before {
  right: var(--zd_size50) ;
  left: var(--zd_size50) ;
}

.aside {
  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
}

.title {
  color: var(--zdt_subtablayout_title_text);
  font-size: var(--zd_font_size15) ;
}

.label {
  font-size: var(--zd_font_size12) ;
  color: var(--zdt_subtablayout_label_text);
}

.primary,
.primary_peek,
.secondary,
.secondary_peek,
.primary_detailFooter,
.primary_peekFooter,
.secondary_detailFooter,
.secondary_peekFooter {
  padding-block: var(--zd_size27) var(--zd_size26) ;
  padding-inline-start: var(--zd_size25) ;
}

.primary,
.primary_peek {
  padding-inline-end: var(--zd_size25) ;
}

.secondary,
.secondary_peek {
  padding-inline-end: var(--zd_size115) ;
}

.primary_detailFooter,
.primary_peekFooter {
  padding-inline-end: var(--zd_size25) ;
}

.secondary_detailFooter,
.secondary_peekFooter {
  padding-inline-end: var(--zd_size115) ;
}

.tertiary,
.tertiary_peek {
  height: var(--zd_size50) ;
}

.tertiary,
.tertiary_detailFooter {
  padding-block:0 ;
  padding-inline: var(--zd_size65) ;
}

.tertiary_peek,
.tertiary_peekFooter {
  padding-block:0 ;
  padding-inline: var(--zd_size42) ;
}

.cursor {
  cursor: pointer;
}

.footer {
  composes: varClass;
  border-top: 1px solid var(--borderColor);
}

.medium {
  height: var(--zd_size40) ;
}

.large {
  height: var(--zd_size45) ;
}

.xlarge {
  height: var(--zd_size50) ;
}