@zohodesk/dot/lib/list/ListLayout/ListLayout.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.varClass {
  --listBorder: var(--zdt_listLayout_border)
}

.container {
  position: relative;
  composes: varClass;
}

.listHover:hover, .hoveredStyle, .listHover:focus-within, .hoveredStyle:focus-within {
  background-color: var(--zdt_listLayout_hover_bg);
}

.active, .active:hover {
  background-color: var(--zdt_listLayout_active_bg);
}

.cursorPointer {
  cursor: pointer
}

/* View */
.classic .innerContainer {
  min-height: var(--zd_size70) ;
  padding: var(--zd_size13) 0 ;
}

.compact .innerContainer {
  min-height: var(--zd_size41) ;
  padding: var(--zd_size5) 0 ;
}

.superCompact .innerContainer {
  min-height: var(--zd_size35) ;
  padding: var(--zd_size2) 0 ;
}

.compact .innerContainer,
.classic .innerContainer,
.superCompact .innerContainer {
  /* css:theme-validation:ignore */
}

.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
  border-bottom: 1px dotted var(--listBorder);
}

[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
  border-left: var(--zd_size2) solid transparent;
}

[dir=rtl] .compact, [dir=rtl] .classic, [dir=rtl] .superCompact {
  border-right: var(--zd_size2) solid transparent;
}

[dir=ltr] .keyboardActive, [dir=ltr] .active {
  border-top-left-radius: var(--zd_size5);
  border-bottom-left-radius: var(--zd_size5);
}

[dir=rtl] .keyboardActive, [dir=rtl] .active {
  border-top-right-radius: var(--zd_size5);
  border-bottom-right-radius: var(--zd_size5);
}

[dir=ltr] .keyboardActive {
  border-left-color: var(--zdt_listLayout_keyboard_active_border);
}

[dir=rtl] .keyboardActive {
  border-right-color: var(--zdt_listLayout_keyboard_active_border);
}

[dir=ltr] .active {
  border-left-color: var(--zdt_listLayout_active_border);
}

[dir=rtl] .active {
  border-right-color: var(--zdt_listLayout_active_border);
}