@artaio/arta-browser 2.6.0 → 2.9.4-add-backdrop72cde9bc5f6b74ebbea4e133e6113ca295d73401

package/dist/components/TrackingDrawer/index.css

@@ -0,0 +1,1088 @@
+/* reset */
+
+:root {
+  --background: #FFFFFF;
+  --text-primary: #110F10;
+  --text-secondary: #6F6C65;
+  --border: #D7D6D0;
+  --width: 540px;
+  --font-family: "Neue Haas Grotesk Text Pro, Helvetica, sans-serif, Arial";
+  --font-size: 14px;
+  --default-styling: 'flex';
+  --minimal-styling: 'none';
+
+  --location-direction: 'row';
+  --location-justify: 'center';
+  --location-align: 'flex-start';
+  --location-flex: '1 0 0';
+  --backdrop-color: rgba(0, 0, 0, 0.5);
+
+}
+
+.artajs__drawer,
+.artajs__drawer__backdrop {
+  all: initial;
+}
+
+.artajs__drawer a,
+.artajs__drawer button,
+.artajs__drawer div,
+.artajs__drawer input,
+.artajs__drawer form,
+.artajs__drawer p,
+.artajs__drawer select,
+.artajs__drawer__backdrop div {
+  all: unset;
+}
+
+/* Box sizing rules */
+.artajs__drawer *,
+.artajs__drawer *::before,
+.artajs__drawer *::after,
+.artajs__drawer__backdrop *,
+.artajs__drawer__backdrop *::before,
+.artajs__drawer__backdrop *::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+.artajs__drawer div,
+.artajs__drawer h1,
+.artajs__drawer h2,
+.artajs__drawer h3,
+.artajs__drawer h4,
+.artajs__drawer p {
+  margin: 0;
+}
+
+.artajs__drawer div,
+.artajs__drawer p {
+  display: block;
+  font-family: var(--font-family);
+}
+
+/* Inherit fonts for inputs and buttons */
+.artajs__drawer input,
+.artajs__drawer button,
+.artajs__drawer select {
+  font: inherit;
+  margin: 0
+}
+
+/* drawer styles */
+.artajs__drawer {
+  background-color: var(--background);
+  height: 100vh;
+  position: fixed;
+  z-index: 2001;
+  bottom: 0px;
+  font-family: var(--font-family);
+}
+
+.artajs__drawer__left {
+  left: 0;
+  right: auto;
+}
+
+.artajs__drawer__right {
+  left: auto;
+  right: 0;
+}
+
+/* backdrop */
+.artajs__drawer__backdrop {
+  background-color: var(--backdrop-color);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2001;
+}
+
+
+.artajs__drawer .artajs__tracking__out__wrapper {
+  display: flex;
+  width: var(--width);
+  flex-direction: column;
+  align-items: flex-start;
+
+  background: var(--background, #FFF);
+
+  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.25);
+  height: 100%;
+}
+
+
+/* Header styles */
+.artajs__drawer .artajs__tracking__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__header__title {
+  display: flex;
+  padding: 16px 24px;
+  align-items: center;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__header__text {
+  flex: 1 0 0;
+  font-size: calc(var(--font-size) + 2px);
+  font-weight: bold;
+  line-height: 150%;
+  color: var(--text-primary);
+}
+
+.artajs__drawer .artajs__tracking__header__icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  padding-right: 0px;
+  justify-content: center;
+  align-items: center;
+}
+
+.artajs__drawer .artajs__tracking__header__icon a {
+  cursor: pointer;
+  display: block;
+  height: 24px;
+  text-decoration: none;
+}
+
+.artajs__drawer .artajs__tracking__header__icon a svg line {
+  stroke: var(--text-secondary);
+}
+
+.artajs__drawer .artajs__tracking__header__icon a:hover svg line {
+  stroke: var(--text-primary);
+}
+
+.artajs__drawer .artajs__tracking__header__line {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border);
+}
+
+/* Body styles */
+.artajs__drawer .artajs__tracking__body {
+  display: flex;
+  padding: 16px 24px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  overflow-y: auto;
+  max-height: 100%;
+  flex-grow: 1;
+}
+
+
+/* Timeline Default styles */
+.artajs__drawer .artajs__tracking__timeline__default__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__timeline__default__steps {
+  display: flex;
+  padding: 0px 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__timeline__default__step__icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__triple__dots {
+  display: flex;
+  padding-top: 22px;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__status__text__large {
+  color: var(--text-primary);
+  text-align: center;
+
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) + 2px);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 150%;
+}
+
+.artajs__drawer .artajs__tracking__timeline__step {
+  display: flex;
+  padding-top: 12px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__step__text__secondary {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__step__text__primary {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__status__text__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.artajs__drawer .artajs__tracking__timeline__status__date {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 0px 4px;
+  align-self: stretch;
+  flex-wrap: wrap;
+}
+
+.artajs__drawer .artajs__tracking__timeline__status__date__content {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  /* 18px */
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__status__date__secondary {
+  color: var(--text-secondary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 3px);
+  line-height: 150%;
+  /* 18px */
+  letter-spacing: 0.2px;
+}
+
+/* Timeline Minimal styles */
+.artajs__drawer .artajs__tracking__timeline__minimal__wrapper {
+  display: flex;
+  width: 140px;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+}
+
+@media (max-width: 540px) {
+  .artajs__drawer .artajs__tracking__out__wrapper {
+    width: 100% !important;
+  }
+
+  .artajs__drawer__right {
+    width: 100% !important;
+  }
+
+  .artajs__drawer__left {
+    width: 100% !important;
+  }
+
+  .artajs__drawer .artajs__tracking__timeline__default__wrapper {
+    display: none !important;
+  }
+
+  .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {
+    display: flex !important;
+  }
+
+  .artajs__drawer .artajs__tracking__location {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .artajs__drawer .artajs__tracking__location__item {
+    flex: 0 1 auto;
+  }
+
+  .artajs__drawer__backdrop {
+    display: none;
+  }
+}
+
+@media (min-width: 541px) {
+  .artajs__drawer .artajs__tracking__out__wrapper {
+    width: var(--width) !important;
+  }
+
+  .artajs__drawer__right {
+    width: var(--width) !important;
+  }
+
+  .artajs__drawer__left {
+    width: var(--width) !important;
+  }
+
+  .artajs__drawer .artajs__tracking__timeline__default__wrapper {
+    display: var(--default-styling) !important;
+  }
+
+  .artajs__drawer .artajs__tracking__timeline__minimal__wrapper {
+    display: var(--minimal-styling) !important;
+  }
+
+  .artajs__drawer .artajs__tracking__location {
+    flex-direction: var(--location-direction);
+    justify-content: var(--location-justify);
+    align-items: var(--location-align);
+  }
+
+  .artajs__drawer .artajs__tracking__location__item {
+    flex: var(--location-flex);
+  }
+
+  .artajs__drawer__backdrop {
+    display: unset;
+  }
+}
+
+.artajs__drawer .artajs__tracking__timeline__minimal__divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__minimal__step {
+  display: flex;
+  padding: 10px;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__minimal__spacing {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__minimal__secondary__step {
+  fill: var(--border);
+  width: 8px;
+  height: 8px;
+}
+
+.artajs__drawer .artajs__tracking__timeline__divider {
+  display: flex;
+  width: 140px;
+  height: 1px;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Tracking Top styles */
+.artajs__drawer .artajs__tracking__top__wrapper {
+  display: flex;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-bottom: 1px solid var(--border);
+}
+
+.artajs__drawer .artajs__tracking__top__divider {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__top__cta {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__top__text {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__top__date__wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 24px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__top__date__aligner {
+  display: flex;
+  height: 71px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.artajs__drawer .artajs__tracking__top__date__day {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  font-weight: bold;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__top__date__day__numeric {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-weight: bold;
+  font-size: calc(var(--font-size) + 42px);
+  line-height: calc(var(--font-size) + 42px);
+}
+
+.artajs__drawer .artajas__tracking__top__date__and {
+  justify-content: flex-end;
+  display: flex;
+  flex-direction: column;
+  font-size: calc(var(--font-size) - 1px);
+  height: 95%;
+}
+
+/* Tracking Location */
+.artajs__drawer .artajas__tracking__location__wrapper {
+  display: flex;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  border-bottom: 1px solid var(--border);
+}
+
+.artajs__drawer .artajs__tracking__location {
+  display: flex;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__location__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__location__text__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  flex: 1 0 0;
+}
+
+.artajs__drawer .artajs__tracking__location__text__header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+/* Tracking Packings */
+
+.artajs__drawer .artajs__packings__wrapper {
+  display: flex;
+  padding: 16px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--background);
+
+  /* 1 */
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
+}
+
+.artajs__drawer .artajs__packings__spacer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__header__top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__header__body {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+}
+
+
+.artajs__drawer .artajs__packings__line {
+  width: 100%;
+  height: 1px;
+  background-color: var(--border);
+}
+
+.artajs__drawer .artajs__packings__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__text__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__packings__text__regular__underline {
+  cursor: pointer;
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 150%;
+  /* 21px */
+  letter-spacing: 0.2px;
+  text-decoration-line: underline;
+}
+
+.artajs__drawer .artajs__packings__text__small__underline {
+  cursor: pointer;
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  /* 18px */
+  letter-spacing: 0.2px;
+  text-decoration-line: underline;
+}
+
+.artajs__drawer .artajs__tracking__title {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__subtype {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  /* 18px */
+  letter-spacing: 0.2px;
+}
+
+/* Footer */
+.artajs__drawer .artajs__tracking__footer__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  margin-bottom: 16px;
+  margin-top: auto;
+}
+
+.artajs__drawer .artajs__tracking__footer__content {
+  display: flex;
+  width: 240px;
+  padding: 8px 32px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.artajs__drawer .artajs__tracking__footer__powered__by__text {
+  color: #6F6C65;
+  text-align: center;
+  font-family: Helvetica;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  /* 18px */
+}
+
+.artajs__drawer .artajs__tracking__footer__powered__by__logo {
+  display: flex;
+  width: 48.32px;
+  height: 16px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Insurance box */
+.artajs__drawer .artajs__tracking__insurance__wrapper {
+  display: flex;
+  padding-top: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  border-top: 1px solid var(--border);
+}
+
+.artajs__drawer .artajs__tracking__insurance__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+  border-radius: 8px;
+}
+
+.artajs__drawer .artajs__tracking__insurance__title {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__insurance__body {
+  width: 154px;
+  height: 18px;
+  display: flex;
+  gap: 4px;
+}
+
+.artajs__drawer .artajs__tracking__insurance__body__icon {
+  display: flex;
+  width: 18px;
+  height: 20px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.artajs__drawer .artajs__tracking__insurance__body__icon__text {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+/* Summary styles */
+.artajs__drawer .artajs__tracking__summary__wrapper {
+  display: flex;
+  padding-top: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  border-top: 1px solid var(--border);
+}
+
+.artajs__drawer .artajs__tracking__summary__content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.artajs__drawer .artajs__tracking__summary__date {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__summary__title {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+/* Exceptions */
+.artajs__drawer .artajs__tracking__exception__wrapper {
+  display: flex;
+  padding-bottom: 24px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-bottom: 1px solid var(--border);
+}
+
+.artajs__drawer .artajs__tracking__exception__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__exception__title {
+  color: var(--text-primary);
+  text-align: center;
+  align-self: stretch;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__exception__cta {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  line-height: 150%;
+  letter-spacing: 0.2px;
+  text-decoration-line: underline;
+  align-self: stretch;
+  cursor: pointer;
+}
+
+/* Shipments Events List */
+
+.artajs__drawer .artajs__tracking__events__wrapper {
+  display: flex;
+  padding: 16px 0px 16px 24px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.artajs__drawer .artajs__tracking__events__return {
+  display: flex;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  align-self: stretch;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.artajs__drawer .artajs__tracking__events__return__text {
+  color: var(--text-primary);
+  text-align: center;
+  font-family: var(--font-family);
+  font-style: normal;
+  line-height: 150%;
+  letter-spacing: 0.2px;
+  text-decoration-line: underline;
+}
+
+.artajs__drawer .artajs__tracking__events__header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+}
+
+.artajs__drawer .artajs__tracking__events__header__title {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 150%;
+  /* 21px */
+  letter-spacing: 0.2px;
+}
+
+/* Loading */
+
+.artajs__drawer .artajs__drawer__loading {
+  position: absolute;
+  top: 42%;
+  left: 44%;
+  transform: translate(-50%, -50%);
+  height: 56px;
+  width: 56px;
+  box-sizing: border-box;
+  background: conic-gradient(from 90deg at 50% 50%,
+      rgba(39, 174, 96, 0) 0deg,
+      rgba(31, 144, 255, 0) 0.04deg,
+      var(--text-secondary) 360deg);
+  border-radius: 56px;
+  /* previous code */
+  animation: 1s rotate infinite linear;
+}
+
+.artajs__drawer .artajs__drawer__loading::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 40px;
+  width: 40px;
+  background: var(--background);
+  border-radius: 48px;
+}
+
+.artajs__drawer .artajs__drawer__loading::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 8px;
+  width: 8px;
+  background: var(--text-secondary);
+  border-radius: 8px;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pill */
+.artajs__drawer .artajs__tracking__pill__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.artajs__drawer .artajs__tracking__pill__round {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 12px;
+}
+
+.artajs__drawer .artajs__tracking__pill__text {
+  text-align: center;
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 3px);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__events__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  overflow-y: auto;
+  max-height: 100%;
+  flex-grow: 1;
+}
+
+.artajs__drawer .artajs__tracking__events__group {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  margin-left: 6px;
+  padding-right: 24px;
+}
+
+.artajs__drawer .artajs__tracking__events__date {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+  margin-bottom: 4px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__content {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__number__primary {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+  margin-top: 6px;
+  min-width: 24px;
+  text-align: end;
+}
+
+.artajs__drawer .artajs__tracking__events__group__number__secondary {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+  margin-top: 6px;
+  min-width: 24px;
+  text-align: end;
+}
+
+.artajs__drawer .artajs__tracking__events__group__divider {
+  display: flex;
+  flex-direction: column;
+}
+
+.artajs__drawer .artajs__tracking__events__group__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.artajs__drawer .artajs__tracking__events__vertical {
+  /* border: var(--border); */
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.artajs__drawer .artajs__tracking__events__round {
+  margin-top: 0;
+  margin-bottom: 0;
+  height: 30px;
+  width: 30px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__location {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__location__secondary {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-weight: bold;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__time {
+  color: var(--text-secondary);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size) - 2px);
+  font-style: normal;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+}
+
+.artajs__drawer .artajs__tracking__events__group__description {
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  line-height: 130%;
+  letter-spacing: 0.2px;
+
+}