@layer page {
  .expense-header {
    display: block grid;
    grid-template-columns: 1fr auto;
  }

  .page-title {
    grid-column: 1/2;
  }

  #expense-title {
    justify-self: start;
    view-transition-name: expense-title;
  }

  #expense-list-title {
    justify-self: start;
    view-transition-name: expense-list-title;
  }

  .filter-datetime-button {
    display: inline flex;
    gap: 2px;
    align-items: center;

    padding: 3px;
    border: 2px solid transparent;
    border-radius: 10px;

    font-size: 1rem;
  }

  .expense-filter-container {
    position: relative;

    display: block flex;
    grid-column: 2/3;
    grid-row: 1/2;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    align-self: center;

    view-transition-name: expense-filter-container;

    &:has(:popover-open) {
      .filter-datetime-button {
        /* border-color: var(--base-secondary); */
        background-color: color-mix(
          in srgb,
          var(--base-secondary) 10%,
          transparent
        );
      }
    }
  }

  .filter-datetime-month-list {
    position: absolute;

    flex-direction: column;
    gap: 5px;
    align-items: center;

    max-block-size: 200px;
    margin: 0;
    padding: 5px;
    border: 2px solid var(--base-secondary);
    border-radius: 10px;

    opacity: 0;

    &:popover-open {
      translate: -50% 0;
      display: block flex;
      align-items: stretch;
    }
  }

  .filter-datetime-month-list-item {
    display: block flex;
    align-items: center;

    &:has(.this-month) + .filter-datetime-month-list-item {
      padding-block-start: 5px;
      border-block-start: 2px solid var(--base-secondary);
    }
  }

  .filter-datetime-month-item-link {
    display: block flex;
    justify-content: center;
    inline-size: 100%;
    padding: 5px;

    &[aria-current] {
      border-color: var(--base-secondary);
      color: var(--base-secondary);
      background-color: var(--base-tertiary);
    }
  }

  .expense-total-text {
    grid-column: 1/-1;
    grid-row: 2/3;
    margin-block: 15px;
    view-transition-name: expense-total-text;
  }

  .category-ratio-table {
    border-spacing: 0 5px;
    border-collapse: separate;
    inline-size: 100%;
  }

  .category-ratio-table-caption {
    padding-block: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: start;
  }

  .category-ratio-table-thead {
    view-transition-name: category-ratio-table-thead;
  }

  .category-td-value {
    display: inline flex;
  }

  .category-filter-link {
    color: var(--base-secondary);

    .category-td-value {
      text-decoration: underline;
    }
  }

  .category-th {
    text-align: start;
  }

  .amount-th {
    text-align: end;
  }

  :is(.category-ratio-td, .category-amount-td) {
    text-align: end;
  }

  .category-category-td {
    inline-size: 25%;
  }

  .category-amount-td {
    inline-size: 25%;
  }

  .category-ratio-td {
    position: relative;
    inline-size: 50%;
  }

  .category-ratio-value-container {
    position: relative;

    overflow: hidden;

    margin-inline: 5px;
    padding-block: 1px;
    border: 2px solid var(--base-secondary);
    border-radius: 10px;

    .category-chart-bar {
      --bar-padding: 6px;

      position: absolute;
      z-index: 10;
      inset-block: 50%;
      inset-inline: var(--bar-padding);
      transform-origin: left;
      translate: 0 -50%;
      scale: calc(var(--percentage) / 100) 1;

      inline-size: calc(100% - calc(var(--bar-padding) * 2));
      block-size: calc(100% - calc(var(--bar-padding) * 2));

      background: var(--base-success);

      view-transition-name: var(--bar-id);
    }
  }

  .category-ratio-value {
    position: relative;
    z-index: 100;

    display: block flex;
    justify-content: end;

    inline-size: 100%;
    block-size: 100%;
    padding-inline-end: 8px;

    view-transition-name: var(--percentage-id);
  }

  .expense-remove-filter-button {
    grid-column: 2/3;
    grid-row: 1/2;
    view-transition-name: expense-remove-filter-button;
  }

  .expense-list-filter-container {
    grid-column: 1/-1;
    grid-row: 2/3;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 5px;

    view-transition-name: expense-list-filter-container;

    [data-filter] {
      scroll-margin-block-start: 100dvb;
      place-self: center start;
    }
  }

  .expense-list-filter-description {
    display: inline flow-root;
    grid-column: 2 span;
    margin-inline-end: auto;
  }

  .expense-list-container {
    scroll-margin-block-start: 60px;

    display: block grid;
    grid-auto-rows: auto;
    grid-template-columns: 1fr auto auto auto;
    gap: 10px;
    align-items: center;

    .expense-list-filter-container {
      display: none;
    }

    &:has(.filter-hide) {
      .expense-list-filter-container {
        display: block grid;
      }
    }

    @media screen and (width <= 540px) {
      scroll-margin-block-start: 0;
    }
  }

  .expense-list-title {
    grid-column: 1/2;
    grid-row: 1/2;
    justify-self: start;
  }

  .expense-create-link {
    grid-column: 4/5;
    grid-row: 1/2;
    view-transition-name: expense-create-link;
  }

  .expense-export-button {
    grid-column: 3/4;
    grid-row: 1/2;
    view-transition-name: expense-export-button;
  }

  .expense-export-dialog {
    inline-size: calc(100% - 10px);
  }

  .dialog-export-download-button {
    margin-inline-end: 10px;

    :is(.loader-icon, .check-icon) {
      display: none;
    }

    &.processing {
      .loader-icon {
        display: revert;
      }
    }

    &.finished {
      .check-icon {
        display: revert;
      }
    }
  }

  .expense-group {
    display: block grid;
    grid-column: 1/-1;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .expense-more-button {
    z-index: 1000;

    grid-column: 3 / 4;
    grid-row: 1/2;
    align-self: start;

    inline-size: max-content;
    border-color: var(--base-tertiary);
  }

  :is(.expense-delete-dialog, .expense-copy-dialog) {
    inline-size: calc(100% - 10px);

    .expense-more-button {
      display: none;
    }
  }

  :is(.expense-delete-dialog-form, .expense-copy-dialog-form) {
    display: block flex;
    gap: 10px;
    margin-block-start: 20px;
  }

  :is(.expense-delete-dialog-text, .expense-copy-dialog-text) {
    display: inline flow-root;
    margin-block-end: 10px;
  }

  .expense-article {
    position: relative;

    display: block grid;
    grid-auto-rows: auto;
    grid-column: 1/-1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto auto auto;
    align-items: center;

    padding: 20px;
    border: 2px solid var(--base-secondary);
    border-radius: 10px;

    &:has(:popover-open) {
      .expense-more-button {
        background-color: color-mix(
          in srgb,
          var(--base-secondary) 10%,
          transparent
        );
      }
    }

    &.filter-hide {
      display: none;
    }
  }

  .expense-data-list {
    position: relative;
    z-index: 100;

    display: block grid;
    grid-column: 1/-1;
    grid-row: 1/-1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    flex: 1;
    gap: 13px;

    margin: 0;
  }

  .expense-data-term {
    grid-column: 1/2;
    align-self: center;
    white-space: nowrap;
  }

  .expense-data-definition {
    display: block flex;
    grid-column: 2/3;
    flex-wrap: wrap;
    gap: 10px;
    align-self: center;

    margin-inline-start: 0;
  }

  :is(.datetime-term, .datetime-definition, .amount-term, .amount-definition, .category-term, .category-definition, .note-term, .note-definition) {
    grid-column: 1 / span 1;
    grid-row: span 1;
  }

  :is(.datetime-definition, .amount-definition, .category-definition, .note-definition) {
    grid-column: 2 / span 1;
    grid-row: span 1;
  }

  .category-definition {
    margin-block: -7px;
  }

  .tag-term {
    grid-column: 1 / span 1;
    grid-row: span 1;
  }

  .tag-definition {
    grid-column: span 3;
    grid-row: span 1;
  }

  .expense-popover-group {
    position: absolute;
    translate: -50% 0;

    inline-size: max-content;
    padding: 5px;
    border: 2px solid var(--base-secondary);
    border-radius: 10px;

    opacity: 0;
    background-color: var(--base-tertiary);
  }

  .expense-popover-group-list {
    display: block flex;
    flex-direction: column;
    gap: 5px;

    margin: 0;
    padding: 0;
  }

  .expense-popover-group-list-item {
    display: block flex;
    align-items: center;
    justify-content: center;
  }
}