.varClass {
    --local-arrowIcon-color: var(--zdt_arrowicon_default_icon);
}

.arrowIcon {
  composes: varClass;
  margin-block:0 ;
  margin-inline: var(--zd_size5) ;
  color: var(--local-arrowIcon-color);
  transition: transform var(--zd_transition3);
}
.transparentContainer .arrowIcon {
  opacity: 0;
  visibility: hidden;
}

.transparentContainer .active,
.transparentContainer:hover .arrowIcon {
  opacity: 1;
  visibility: visible;
}

[dir=ltr] .rotated {
    transform: rotateZ(-180deg);
}

[dir=rtl] .rotated {
  transform: rotateZ(180deg);
}

.rotated,
.active,
.arrowContainer:hover .arrowIcon {
  --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
}

.disabled {
  composes: disabled from '../../common/common.module.css';
}

.readonly {
  composes: curdefault from '../../common/common.module.css';
}