@layerfi/components 0.1.100 → 0.1.102-alpha

package/dist/index.css

@@ -547,10 +547,12 @@
 .Layer__btn:disabled {
   box-shadow: none;
   background-color: var(--color-base-200);
-  color: var(--color-base-500);
   cursor: not-allowed;
 }
-.Layer__btn:disabled .Layer__btn-icon {
+.Layer__btn:disabled > .Layer__btn-content > .Layer__btn-text {
+  color: var(--color-base-500);
+}
+.Layer__btn:disabled > .Layer__btn-content > .Layer__btn-icon {
   background-color: transparent;
   color: var(--color-base-500);
 }
@@ -580,10 +582,6 @@
   color: var(--btn-color-primary);
   background: transparent;
 }
-.Layer__btn--primary:visited,
-.Layer__btn--primary:active {
-  box-shadow: 0 0 0 1px var(--color-base-800);
-}
 .Layer__btn--primary:hover:not([disabled]) .Layer__btn-icon,
 .Layer__btn--primary.Layer__btn--active:not([disabled]) .Layer__btn-icon {
   color: var(--btn-color-icon-hover);
@@ -4380,12 +4378,12 @@ tbody .Layer__table__empty-row:first-child {
   position: relative;
 }
 .Layer__view .Layer__view-main {
-  padding: var(--spacing-lg);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
+  padding: var(--spacing-lg);
   container-type: inline-size;
-  box-sizing: border-box;
 }
 .Layer__view .Layer__view-main .Layer__toggle {
   border-radius: 6px;
@@ -4397,16 +4395,15 @@ tbody .Layer__table__empty-row:first-child {
   border-radius: 6px;
 }
 .Layer__view .Layer__view-header {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
+  overflow: auto;
   width: 100%;
   max-width: 100%;
-  overflow: auto;
-  container-type: inline-size;
-  position: relative;
-  z-index: 1;
-  border-bottom: 1px solid var(--border-color);
   padding: 0 var(--spacing-md);
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-color);
+  container-type: inline-size;
 }
 .Layer__view .Layer__view-header .Layer__header__row:last-child {
   border-width: 0;
@@ -4415,11 +4412,11 @@ tbody .Layer__table__empty-row:first-child {
   width: min-content;
 }
 .Layer__view .Layer__view-header__title {
-  padding: var(--spacing-md) var(--spacing-sm);
+  display: flex;
+  align-items: center;
   width: 100%;
   min-height: 44px;
-  align-items: center;
-  display: flex;
+  padding: var(--spacing-md) var(--spacing-sm);
 }
 .Layer__view .Layer__view-header__content {
   display: flex;
@@ -4435,15 +4432,14 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-md);
 }
 .Layer__view .Layer__view-header__children {
-  width: 100%;
   display: flex;
+  width: 100%;
 }
 .Layer__view.Layer__view--panel .Layer__view-main {
   padding: 0;
 }
 .Layer__view.Layer__view--panel .Layer__view-header {
   position: relative;
-  z-index: 1;
   padding: 0;
 }
 .Layer__view.Layer__view--panel .Layer__view-header__content {
@@ -4753,9 +4749,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ModalContextBar {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  column-gap: var(--spacing-md);
   grid-template-areas: "back logo close";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  column-gap: var(--spacing-md);
   align-items: center;
 }
 .Layer__ModalContextBar > [slot=back] {
@@ -4769,8 +4765,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ModalContent {
   display: grid;
-  block-size: 100%;
   overflow-y: auto;
+  block-size: 100%;
 }
 .Layer__ModalContent > [slot=center] {
   align-self: center;
@@ -4991,18 +4987,18 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__MinimalSearchField {
   display: grid;
   grid-template-areas: "input clear-button";
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   border: none;
 }
 .Layer__MinimalSearchField > [slot=input] {
   grid-area: input;
-  font-family: var(--font-family);
-  border: none;
-  outline: none;
-  background: none;
   min-block-size: 1.5rem;
   padding-inline: var(--spacing-3xs);
+  outline: none;
+  background: none;
+  font-family: var(--font-family);
+  border: none;
 }
 .Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button,
 .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
@@ -5324,6 +5320,110 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__TransactionsSearchField > [slot=search] {
   grid-area: search;
 }
+.Layer__csv-upload {
+  height: 6rem;
+  border-radius: var(--spacing-3xs);
+  padding: var(--spacing-xs);
+  background: var(--color-base-100);
+  border: 1px dashed var(--color-base-400);
+  transition: border-color 0.5s, background-color 0.5s;
+  position: relative;
+}
+.Layer__csv-upload--drag-active {
+  background: var(--color-base-200);
+  border-color: var(--color-base-500);
+}
+.Layer__csv-upload__browse-link {
+  all: unset;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.Layer__csv-upload__browse-link:focus,
+.Layer__csv-upload__browse-link:active,
+.Layer__csv-upload__browse-link:focus-visible {
+  border-radius: 2px;
+  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08), 0 0 0 1px var(--color-base-700);
+  outline: none;
+}
+.Layer__csv-upload__error-message {
+  position: absolute;
+  bottom: var(--spacing-sm);
+  left: var(--spacing-sm);
+}
+.Layer__csv-upload__error-message .Layer__data-state__icon {
+  background: var(--color-base-0);
+}
+.Layer__csv-upload__file-row {
+  height: 2rem;
+  border-radius: var(--border-radius-3xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--color-base-100);
+  border: 1px solid var(--color-base-400);
+}
+.Layer__csv-upload__file-row--drop-target {
+  height: 6rem;
+}
+.Layer__csv-upload__copy-template-headers-button-group {
+  padding: var(--spacing-3xs);
+  border-radius: var(--border-radius-3xs);
+  background-color: var(--color-base-200);
+}
+.Layer__csv-upload__validate-csv-table__container {
+  max-height: 561px;
+  border-radius: var(--border-radius-3xs);
+  border: 1px solid var(--color-base-400);
+}
+.Layer__csv-upload__validate-csv-table__scroll_container {
+  overflow: auto;
+  position: relative;
+}
+.Layer__csv-upload__validate-csv-table__thead {
+  z-index: 1;
+  background-color: var(--bg-subtle);
+}
+.Layer__csv-upload__validate-csv-table__header-row {
+  display: flex;
+  width: 100%;
+}
+.Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell {
+  padding: 0;
+  display: flex;
+  flex: 1 1 0;
+}
+.Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell--row {
+  flex: 0 0 60px;
+}
+.Layer__csv-upload__validate-csv-table__header-cell-content {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+.Layer__table-row.Layer__csv-upload__validate-csv-table__row {
+  display: flex;
+  position: absolute;
+  width: 100%;
+}
+.Layer__table-row.Layer__csv-upload__validate-csv-table__row--error {
+  background-color: var(--color-info-error-bg);
+}
+.Layer__table-cell.Layer__csv-upload__validate-csv-table__cell {
+  flex: 1 1 0%;
+  min-width: 0px;
+}
+.Layer__table-cell.Layer__csv-upload__validate-csv-table__cell--row {
+  flex: 0 0 60px;
+}
+.Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+.Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--error {
+  color: var(--color-danger);
+}
+.Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--row {
+  text-align: end;
+}
 .Layer__due-status {
   display: flex;
   flex-direction: column;
@@ -5350,12 +5450,12 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-800);
 }
 .Layer__BasicLinkedAccountContainer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   padding-inline: var(--spacing-xs) var(--spacing-md);
   padding-block: var(--spacing-xs);
-  border: 1px solid var(--outline-subtle);
   border-radius: var(--border-radius-xs);
-  display: grid;
-  grid-template-columns: 1fr auto;
+  border: 1px solid var(--outline-subtle);
 }
 .Layer__BasicLinkedAccountContainer[data-selected] {
   background-color: var(--bg-subtle);
@@ -5367,9 +5467,9 @@ tbody .Layer__table__empty-row:first-child {
   width: 52px;
   height: 28px;
   padding: var(--spacing-3xs) 0;
+  border-radius: var(--border-radius-3xs);
   background: var(--color-base-0);
   color: var(--color-base-200);
-  border-radius: var(--border-radius-3xs);
 }
 .Layer__caobfb {
   padding-inline: var(--spacing-md);
@@ -5484,14 +5584,14 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__LinkAccountsListContainer {
   display: grid;
-  row-gap: var(--spacing-xs);
   grid-auto-rows: 1fr;
+  row-gap: var(--spacing-xs);
   overflow-y: auto;
   max-block-size: max(24rem, 60dvh);
 }
 @container (min-width: 48rem) {
   .Layer__LinkAccountsListContainer {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: var(--spacing-xs);
   }
 }
@@ -6408,6 +6508,42 @@ tbody .Layer__table__empty-row:first-child {
   flex: 1;
   padding: var(--spacing-lg);
 }
+.Layer__upload-transactions__select-account-name-field > .Layer__input-tooltip {
+  flex: auto;
+}
+.Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
+  box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
+}
+.Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
+  color: var(--color-danger);
+}
+.Layer__upload-transactions__create-account-form {
+  border-radius: var(--border-radius-3xs);
+  padding: var(--spacing-xs);
+  background: var(--color-base-100);
+}
+.Layer__upload-transactions__template-section {
+  border-radius: var(--border-radius-3xs);
+  border: 1px solid var(--color-base-400);
+  padding: var(--spacing-md);
+}
+.Layer__upload-transactions__template-section__download-template-button {
+  max-height: 36px;
+}
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
+  flex: 3 1 0;
+  min-width: 120px;
+}
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
+  flex: 2 1 0;
+  min-width: 120px;
+}
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
+.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
+  flex: 6 1 0;
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -8733,6 +8869,18 @@ tbody .Layer__table__empty-row:first-child {
   margin-bottom: var(--spacing-xl);
   color: var(--color-base-500);
 }
+.Layer__data-state--inline {
+  flex-direction: row;
+  gap: var(--spacing-xs);
+}
+.Layer__data-state--inline .Layer__data-state__title,
+.Layer__data-state--inline .Layer__data-state__description {
+  text-align: left;
+  margin-bottom: 0;
+}
+.Layer__data-state--inline .Layer__data-state__icon {
+  margin-bottom: 0;
+}
 .Layer__drawer-background {
   position: fixed;
   display: none;
@@ -9448,21 +9596,21 @@ tbody .Layer__table__empty-row:first-child {
   display: inline-block;
 }
 .Layer__date-picker .Layer__dropdown-toggle {
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
-  border-radius: var(--spacing-2xs);
-  padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
-  min-height: var(--spacing-2xl);
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: space-between;
   min-width: 180px;
-  cursor: pointer;
-  text-align: left;
+  min-height: var(--spacing-2xl);
+  padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
   padding-left: var(--spacing-lm);
-  gap: 20px;
-  border: 1px solid transparent;
+  border-radius: var(--spacing-2xs);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
   background-color: var(--color-white);
+  cursor: pointer;
   font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  text-align: left;
+  border: 1px solid transparent;
 }
 .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron {
   display: flex;
@@ -9472,15 +9620,15 @@ tbody .Layer__table__empty-row:first-child {
   transform: rotate(180deg);
 }
 .Layer__date-picker .Layer__dropdown-menu {
-  margin-top: 5px;
   position: absolute;
+  z-index: 1000;
   top: 100%;
   left: 0;
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+  width: 256px;
   border-radius: var(--spacing-2xs);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
+  margin-top: 5px;
   background-color: var(--color-white);
-  width: 256px;
-  z-index: 1000;
   opacity: 0;
   animation: fadeIn 0.3s forwards;
 }
@@ -9494,46 +9642,46 @@ tbody .Layer__table__empty-row:first-child {
   margin-bottom: var(--spacing-4xs);
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper {
-  border-top: 1px solid var(--color-base-200);
   padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
+  border-top: 1px solid var(--color-base-200);
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper:first-child {
   border-top: transparent;
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options {
   display: grid;
-  grid-template-columns: 2fr 2fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .Layer__date-picker .Layer__option {
-  cursor: pointer;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  font-size: 14px;
-  padding: 0px var(--spacing-xs);
-  max-height: 28px;
+  justify-content: space-between;
   min-height: 28px;
+  max-height: 28px;
+  padding: 0 var(--spacing-xs);
+  cursor: pointer;
+  font-size: 14px;
 }
 .Layer__date-picker .Layer__option:hover {
+  max-width: max-content;
   border-radius: var(--spacing-3xs);
   background: var(--color-base-100);
-  max-width: max-content;
 }
 .Layer__date-picker .Layer__option.Layer__selected {
+  max-width: max-content;
   border-radius: var(--spacing-3xs);
   background: var(--color-base-100);
-  max-width: max-content;
 }
 .Layer__date-picker .Layer__option .Layer__tick {
-  margin-left: 10px;
   padding-top: 2px;
+  margin-left: 10px;
   color: var(--color-base-900);
 }
 .Layer__date-picker .Layer__compare-header {
-  color: var(--color-base-500);
-  font-size: 11px;
-  padding: 0 0 var(--spacing-sm) var(--spacing-xs);
   position: relative;
+  padding: 0 0 var(--spacing-sm) var(--spacing-xs);
+  font-size: 11px;
+  color: var(--color-base-500);
 }
 .Layer__ProfitAndLossSummariesListItem {
   all: unset;
@@ -9608,35 +9756,35 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__compare__options {
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: flex-start;
-  gap: var(--spacing-md);
 }
 .Layer__compare__options .Layer__input-tooltip {
   flex: 1;
 }
 .Layer__compare__options .Layer__compare__switch__options {
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-md);
 }
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
 .Layer__profit-and-loss__title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  margin-right: 1.5rem;
   margin-bottom: 1.5rem;
   margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 .Layer__profit-and-loss-table {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   overflow: hidden;
-  background-color: var(--color-base-100);
   border-radius: var(--border-radius-sm);
+  background-color: var(--color-base-100);
 }
 .Layer__profit-and-loss-table__loader-container {
   padding: var(--spacing-2xl);
@@ -9662,9 +9810,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__children {
   display: grid;
-  grid-column: span 2;
-  grid-template-columns: subgrid;
   grid-template-rows: 0fr;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
   overflow: hidden;
   transition: grid-template-rows var(--transition-speed);
 }
@@ -9672,25 +9820,25 @@ tbody .Layer__table__empty-row:first-child {
   grid-template-rows: 1fr;
 }
 .Layer__profit-and-loss-row__children--content {
-  min-height: 0;
   display: grid;
-  grid-column: span 2;
   grid-template-columns: subgrid;
+  grid-column: span 2;
+  min-height: 0;
 }
 .Layer__profit-and-loss-row__label {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 .Layer__profit-and-loss-row__label .Layer__profit-and-loss-row__label__title {
   display: flex;
   align-items: center;
 }
 .Layer__profit-and-loss-row__label svg.Layer__profit-and-loss-row__label__chevron {
-  color: var(--color-base-600);
   width: 1.25rem;
   height: 1.25rem;
   margin-right: 0.25rem;
+  color: var(--color-base-600);
   transition: transform var(--transition-speed);
   transform: rotate(-90deg);
 }
@@ -9708,8 +9856,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__value {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 .Layer__profit-and-loss-row__label--display-children-true {
   cursor: pointer;
@@ -9722,8 +9870,8 @@ tbody .Layer__table__empty-row:first-child {
   font-weight: normal;
 }
 .Layer__profit-and-loss-row__label--display-children-false svg.Layer__profit-and-loss-row__label__chevron {
-  visibility: hidden;
   display: none;
+  visibility: hidden;
 }
 .Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label,
 .Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label + .Layer__profit-and-loss-row__value {
@@ -9757,22 +9905,22 @@ tbody .Layer__table__empty-row:first-child {
   content: "-$";
 }
 .Layer__profit-and-loss-row__label .Layer__text {
-  color: var(--color-base-700);
-  font-weight: var(--font-weight-normal);
   margin: 0;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-700);
 }
 .Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--depth-0 .Layer__text {
-  color: var(--color-base-800);
-  font-weight: var(--font-weight-bold);
   margin: 0;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-base-800);
 }
 .Layer__profit-and-loss-row__label--depth-1 {
   padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-5xl) + var(--spacing-md));
 }
 .Layer__profit-and-loss-row__label--depth-1 .Layer__text {
-  color: var(--color-base-700);
-  font-weight: var(--font-weight-normal);
   margin: 0;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-700);
 }
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
   font-size: 0.75rem;
@@ -9811,27 +9959,27 @@ tbody .Layer__table__empty-row:first-child {
     0 0 0 1px rgba(16, 24, 40, 0.04),
     0 2px 4px 0 rgba(16, 24, 40, 0.06),
     0 4px 12px 0 rgba(16, 24, 40, 0.08);
-  margin-left: var(--spacing-xl);
   margin-right: var(--spacing-xl);
   margin-bottom: var(--spacing-xl);
+  margin-left: var(--spacing-xl);
 }
 .Layer__profit-and-loss__chart_with_summaries__summary-col {
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-md);
   gap: var(--spacing-md) var(--spacing-md);
+  padding: var(--spacing-md);
 }
 .Layer__profit-and-loss__chart_with_summaries__chart-col {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   padding: var(--spacing-md);
 }
 .Layer__profit-and-loss-row__children--content {
-  min-height: 0;
   display: grid;
-  grid-column: span 2;
   grid-template-columns: subgrid;
+  grid-column: span 2;
+  min-height: 0;
   background-color: var(--color-base-50);
 }
 .Layer__profit-and-loss-chart__bar--loading {
@@ -9928,40 +10076,40 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 1023px) and (min-width: 760px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: var(--spacing-md);
     margin-right: var(--spacing-md);
     margin-bottom: var(--spacing-md);
+    margin-left: var(--spacing-md);
   }
 }
 @container (max-width: 759px) and (min-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: 0;
+    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
-    box-shadow: none;
+    margin-left: 0;
   }
 }
 @container (max-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: 0;
+    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
-    box-shadow: none;
+    margin-left: 0;
   }
 }
 .Layer__profit-and-loss-row__detailed-chart-btn {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-base-100);
-  color: var(--color-base-600);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
   margin-left: auto;
+  background: var(--color-base-100);
   cursor: pointer;
+  color: var(--color-base-600);
   transition: color 150ms ease-out, background-color 150ms ease-out;
 }
 .Layer__profit-and-loss-row__detailed-chart-btn:hover {
@@ -9969,22 +10117,22 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-900);
 }
 .Layer__profit-and-loss-chart__state-card {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: var(--spacing-md);
   align-items: center;
-  position: absolute;
-  background: #fff;
-  padding: var(--spacing-lg) var(--spacing-4xs);
+  justify-content: center;
   width: 260px;
   max-width: 70%;
   height: 120px;
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, -60px);
+  padding: var(--spacing-lg) var(--spacing-4xs);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 0 1px var(--base-transparent-4);
-  gap: var(--spacing-md);
+  background: #fff;
+  transform: translate(-50%, -60px);
 }
 .Layer__profit-and-loss-chart__state-card .Layer__icon-box {
   background-color: var(--color-base-100);
@@ -9992,21 +10140,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-chart__state-card__text {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   gap: var(--spacing-4xs);
+  align-items: center;
+  justify-content: center;
 }
 .Layer__profit-and-loss-chart__state-card__description {
-  color: var(--text-color-secondary);
   text-align: center;
+  color: var(--text-color-secondary);
 }
 .Layer__compare__controls__wrapper {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
   flex-grow: 1;
   flex-wrap: wrap;
+  gap: var(--spacing-md);
+  align-items: center;
+  justify-content: space-between;
 }
 .Layer__compare__table__wrapper .Layer__table__wrapper {
   overflow: auto;