@geotab/zenith 1.22.2-beta.0 → 1.22.2

package/dist/index.css

@@ -1105,6 +1105,7 @@
   --border-radius-default: 4px;
   --padding-top-bottom: 8px;
   --padding-left-right: 8px;
+  --mobile: 640px;
 }
 .zen-visually-hidden {
   clip: rect(0 0 0 0);
@@ -2475,21 +2476,21 @@
   border-color: var(--borders-general);
   background-color: var(--borders-general);
 }
-.zen-list {
+.zen-select-list {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   overflow: auto;
   outline: none;
 }
-.zen-list * {
+.zen-select-list * {
   box-sizing: border-box;
 }
-.zen-list__item {
+.zen-select-list__item {
   list-style: none;
   display: flex;
 }
-.zen-list__item-content {
+.zen-select-list__item-content {
   width: 100%;
   padding: 12px 16px;
   color: var(--text-primary);
@@ -2498,14 +2499,14 @@
   white-space: nowrap;
   word-wrap: normal;
 }
-.zen-list[aria-disabled="true"] {
+.zen-select-list[aria-disabled="true"] {
   cursor: not-allowed;
   color: var(--text-placeholder);
   background-color: var(--backgrounds-field-disabled);
   pointer-events: none;
 }
-.zen-list.zen-list--drive .zen-list__item-content,
-.zen-list.zen-list--drive-tablet .zen-list__item-content {
+.zen-select-list.zen-select-list--drive .zen-select-list__item-content,
+.zen-select-list.zen-select-list--drive-tablet .zen-select-list__item-content {
   padding: 16px;
 }
 .zen-select-item {
@@ -5958,6 +5959,119 @@
     max-width: unset;
   }
 }
+.zen-title-text {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  max-width: 520px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: start;
+}
+.zen-title-text--mobile {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+}
+.zen-title-text--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-title-text--drive {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-title-link {
+  box-sizing: border-box;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.zen-title-link * {
+  box-sizing: border-box;
+}
+.zen-title-link:not(.zen-title-link:hover) {
+  color: var(--action-primary--default);
+  text-decoration: unset;
+}
+.zen-title-link__text {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  max-width: 520px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: start;
+}
+.zen-title-link__text--mobile {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+}
+.zen-title-link__text--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-title-link__text--drive {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-title-link:hover {
+  color: var(--action-primary--active);
+  fill: var(--action-primary--active);
+}
+.zen-title-link:hover .zen-title-link__icon {
+  color: var(--action-primary--active);
+  fill: var(--action-primary--active);
+}
+.zen-title-link__icon {
+  flex-shrink: 0;
+}
+.zen-title-link--drive {
+  padding: 11px;
+}
 .zen-card-status {
   box-sizing: border-box;
   align-self: center;
@@ -6016,88 +6130,13 @@
 .zen-card-status-tooltip-mobile * {
   box-sizing: border-box;
 }
-.zen-title-text {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 16px;
-  text-transform: none;
-  max-width: 520px;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: start;
-}
-.zen-title-text--mobile {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 24px;
-  text-transform: none;
-}
-.zen-title-text--drive-tablet {
-  font-family: var(--main-font);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 22px;
-  text-transform: none;
-}
-.zen-title-text--drive {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 20px;
-  text-transform: none;
-}
-.zen-card-title {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  box-sizing: border-box;
-  min-height: 24px;
-}
-.zen-card-title * {
+.zen-title {
   box-sizing: border-box;
 }
-.zen-card-title__icon {
-  height: 24px;
-  width: 24px;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  fill: var(--accents-general--detail);
-  border-radius: 50%;
-  background-color: var(--accents-general--main);
+.zen-title * {
   box-sizing: border-box;
 }
-.zen-card-title__icon--success {
-  fill: var(--accents-success--detail);
-  background-color: var(--accents-success--main);
-}
-.zen-card-title__icon--error {
-  fill: var(--accents-error--detail);
-  background-color: var(--accents-error--main);
-}
-.zen-card-title__icon--warning {
-  fill: var(--accents-warning--detail);
-  background-color: var(--accents-warning--main);
-}
-.zen-card-title__icon--default {
-  background-color: var(--backgrounds-content-1);
-  fill: var(--text-secondary);
-}
-.zen-card-title__text {
+.zen-title__text {
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
@@ -6114,7 +6153,7 @@
   text-align: start;
   color: var(--text-primary);
 }
-.zen-card-title__text--mobile {
+.zen-title__text--mobile {
   font-family: var(--main-font);
   font-size: 16px;
   font-style: normal;
@@ -6123,7 +6162,7 @@
   line-height: 24px;
   text-transform: none;
 }
-.zen-card-title__text--drive-tablet {
+.zen-title__text--drive-tablet {
   font-family: var(--main-font);
   font-size: 18px;
   font-style: normal;
@@ -6132,7 +6171,7 @@
   line-height: 22px;
   text-transform: none;
 }
-.zen-card-title__text--drive {
+.zen-title__text--drive {
   font-family: var(--main-font);
   font-size: 16px;
   font-style: normal;
@@ -6141,71 +6180,19 @@
   line-height: 20px;
   text-transform: none;
 }
-.zen-card-title__link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 1 auto;
-  gap: 4px;
-  text-decoration: none;
-}
-.zen-card-title__link-text {
-  font-family: var(--main-font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.16px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-primary);
-  flex: 1 1 auto;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.zen-card-title__link-chevron {
-  width: 16px;
-  height: 16px;
-  fill: var(--text-primary);
-  flex: 0 0 auto;
-}
 .zen-card {
   box-sizing: border-box;
   display: grid;
   gap: 16px;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: 20px 1fr;
 }
 .zen-card * {
   box-sizing: border-box;
 }
 .zen-card__header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-  box-sizing: border-box;
-}
-.zen-card__header-primary {
   display: flex;
   gap: 4px;
   align-items: center;
-  padding: 4px 0;
-  width: 100%;
-}
-.zen-card__secondary {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-  width: 100%;
 }
 .zen-card__content {
   width: 100%;
@@ -6273,18 +6260,10 @@
   line-height: 18px;
   text-transform: none;
 }
-.zen-card__menu-trigger {
-  width: 32px;
-  height: 32px;
-}
 .zen-card__menu-trigger--drive {
-  width: 40px;
-  height: 40px;
   padding: 11px;
 }
 .zen-card__menu-trigger--drive-tablet {
-  width: 40px;
-  height: 40px;
   padding: 12px;
 }
 .zen-card__footer {
@@ -6437,35 +6416,6 @@
   padding-top: 11px;
   padding-bottom: 11px;
 }
-.zen-favorite-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background-color: transparent;
-  border: none;
-  fill: var(--text-secondary);
-  cursor: pointer;
-  border-radius: var(--border-radius-default);
-}
-.zen-favorite-button:hover {
-  background-color: var(--backgrounds-content-1);
-}
-.zen-favorite-button__empty {
-  display: initial;
-  flex: 0 0 auto;
-}
-.zen-favorite-button__filled {
-  display: none;
-  flex: 0 0 auto;
-}
-.zen-favorite-button--filled .zen-favorite-button__filled {
-  display: initial;
-}
-.zen-favorite-button--filled .zen-favorite-button__empty {
-  display: none;
-}
 .zen-cards {
   display: flex;
   width: 100%;
@@ -11178,6 +11128,640 @@
     font-size: 0.875rem;
   }
 }
+.zen-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  outline: none;
+}
+.zen-list * {
+  box-sizing: border-box;
+}
+.zen-list__item {
+  list-style: none;
+  display: flex;
+}
+.zen-item-data {
+  padding: 12px 12px 11px 12px;
+  background-color: var(--backgrounds-main);
+  border-bottom: 1px solid var(--borders-general);
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+.zen-item-data:hover {
+  background-color: var(--backgrounds-content-1);
+}
+.zen-item-data__icon {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background-color: var(--action-primary--default);
+  fill: var(--text-reverse-primary);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-item-data__icon-placeholder {
+  width: 24px;
+  flex: 0 0 auto;
+}
+.zen-item-data__main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  min-width: 0;
+  width: 100%;
+  align-items: center;
+}
+.zen-item-data__main-data {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex: 1 1 auto;
+}
+.zen-item-data__identifier {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+  flex: 1 1 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.zen-item-data__name {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  color: var(--text-primary);
+  flex: 1 1 auto;
+}
+.zen-item-data__link {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 16px;
+  text-transform: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  color: var(--text-hyperlink);
+  flex: 1 1 auto;
+  width: 100%;
+}
+.zen-item-data__secondary {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+  flex: 1 1 auto;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+.zen-item-data__status {
+  flex: 0 0 auto;
+}
+.zen-item-data__secondary-data {
+  display: flex;
+  flex-direction: row;
+  column-gap: 12px;
+  flex: 1 1 auto;
+}
+.zen-item-data__data {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+  flex: 1 1 auto;
+}
+.zen-item-data__data-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+}
+.zen-item-data__data-label {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  color: var(--text-secondary);
+  flex: 0 1 30%;
+}
+.zen-item-data__data-value {
+  flex: 1 1 70%;
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.zen-item-data__data-value-icon {
+  flex: 0 0 auto;
+  fill: var(--text-secondary);
+}
+.zen-item-data__data-value-text {
+  flex: 1 1 auto;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.zen-item-data__click {
+  width: 32px;
+  height: 32px;
+  fill: var(--text-secondary);
+}
+.zen-item-data__checkbox-placeholder {
+  width: 16px;
+  flex: 0 0 auto;
+}
+.zen-item-data__waiting {
+  width: 100%;
+  max-width: 300px;
+}
+.zen-item-data--drive .zen-item-data__name {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-item-data--drive .zen-item-data__link {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-item-data--drive .zen-item-data__secondary {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-item-data--drive .zen-item-data__data-label {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-item-data--drive .zen-item-data__data-value {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-item-data--drive .zen-item-data__more-button,
+.zen-item-data--drive .zen-item-data__click {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-item-data--drive .zen-item-data__checkbox-placeholder {
+  width: 24px;
+  flex: 0 0 auto;
+}
+.zen-item-data--drive-tablet .zen-item-data__name {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-item-data--drive-tablet .zen-item-data__link {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.16px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-item-data--drive-tablet .zen-item-data__secondary {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-item-data--drive-tablet .zen-item-data__data-label {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-item-data--drive-tablet .zen-item-data__data-value {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-item-data--drive-tablet .zen-item-data__more-button,
+.zen-item-data--drive-tablet .zen-item-data__click {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-item-data--drive-tablet .zen-item-data__checkbox-placeholder {
+  width: 24px;
+  flex: 0 0 auto;
+}
+.zen-list-item-compact {
+  padding: 8px 0 7px 0;
+  background-color: var(--backgrounds-main);
+  border-bottom: 1px solid var(--borders-general);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 40px;
+}
+.zen-list-item-compact__left-icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  fill: var(--accents-general--detail);
+}
+.zen-list-item-compact__name {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+  flex: 0 1 auto;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.zen-list-item-compact__right-icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  fill: var(--accents-general--detail);
+}
+.zen-list-item-compact__status {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+.zen-list-item-compact__data {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+  flex: 1 0 auto;
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.zen-list-item-compact__icon--success {
+  fill: var(--accents-success--detail);
+}
+.zen-list-item-compact__icon--error {
+  fill: var(--accents-error--detail);
+}
+.zen-list-item-compact__icon--warning {
+  fill: var(--accents-warning--detail);
+}
+.zen-list-item-compact__icon--info {
+  fill: var(--accents-general--detail);
+}
+.zen-list-item-compact__waiting {
+  width: 100%;
+  height: 16px;
+  max-width: 300px;
+}
+.zen-list-item-compact--drive {
+  min-height: 52px;
+}
+.zen-list-item-compact--drive .zen-list-item-compact__name {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-list-item-compact--drive .zen-list-item-compact__data {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-list-item-compact--drive .zen-list-item-compact__waiting {
+  height: 20px;
+  max-width: 500px;
+}
+.zen-list-item-compact--drive-tablet {
+  min-height: 52px;
+}
+.zen-list-item-compact--drive-tablet .zen-list-item-compact__name {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-list-item-compact--drive-tablet .zen-list-item-compact__data {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-list-item-compact--drive-tablet .zen-list-item-compact__waiting {
+  height: 22px;
+  max-width: 500px;
+}
+.zen-list-item {
+  padding: 8px 16px 7px 16px;
+  background-color: var(--backgrounds-main);
+  border-bottom: 1px solid var(--borders-general);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  box-sizing: border-box;
+}
+.zen-list-item:hover {
+  background-color: var(--backgrounds-content-1);
+}
+.zen-list-item__dnd {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  fill: var(--text-secondary);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.zen-list-item__image {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+}
+.zen-list-item__identifier {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-primary);
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+  column-gap: 8px;
+  align-items: center;
+}
+.zen-list-item__name {
+  flex: 0 0 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+}
+.zen-list-item__secondary {
+  flex: 0 1 auto;
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+.zen-list-item__status {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+.zen-list-item__actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+  align-items: center;
+}
+.zen-list-item__action-button,
+.zen-list-item__more-button {
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+}
+.zen-list-item--dragging {
+  display: none;
+}
+.zen-list-item__waiting {
+  max-width: 300px;
+}
+.zen-list-item__click {
+  width: 32px;
+  height: 32px;
+  fill: var(--text-secondary);
+}
+.zen-list-item--clickable {
+  cursor: pointer;
+}
+@media (max-width: 640px) {
+  .zen-list-item__identifier {
+    flex-direction: column;
+    align-items: initial;
+  }
+  .zen-list-item__name {
+    flex: 0 1 auto;
+  }
+  .zen-list-item__secondary {
+    flex: 0 1 auto;
+  }
+}
+.zen-list-item--drive {
+  min-height: 60px;
+}
+.zen-list-item--drive .zen-list-item__image {
+  width: 44px;
+  height: 44px;
+}
+.zen-list-item--drive .zen-list-item__name {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 20px;
+  text-transform: none;
+}
+.zen-list-item--drive .zen-list-item__secondary {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-list-item--drive .zen-list-item__action-button,
+.zen-list-item--drive .zen-list-item__more-button {
+  height: 40px;
+  width: 40px;
+}
+.zen-list-item--drive .zen-list-item__waiting {
+  height: 20px;
+  max-width: 500px;
+}
+.zen-list-item--drive .zen-item-data__click {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.zen-list-item--drive-tablet {
+  min-height: 60px;
+}
+.zen-list-item--drive-tablet .zen-list-item__image {
+  width: 44px;
+  height: 44px;
+}
+.zen-list-item--drive-tablet .zen-list-item__name {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 22px;
+  text-transform: none;
+}
+.zen-list-item--drive-tablet .zen-list-item__secondary {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 18px;
+  text-transform: none;
+}
+.zen-list-item--drive-tablet .zen-list-item__action-button,
+.zen-list-item--drive-tablet .zen-list-item__more-button {
+  height: 44px;
+  width: 44px;
+}
+.zen-list-item--drive-tablet .zen-list-item__waiting {
+  height: 22px;
+  max-width: 500px;
+}
+.zen-list-item--drive-tablet .zen-item-data__click {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .zen-mini-tabs {
   font-family: var(--main-font);
   font-size: 14px;