.inputGrid {
  width: 100%;
  border-spacing: 0;

  th {
    border-bottom: 1px solid var(--bg-gray-darkest);
    font-size: var(--font-size-xs);
    text-align: right;
    padding: 0.75rem 1.5rem;
    color: var(--color-help-text);

    &.title {
      text-align: left;
    }
  }

  &.zebra {
    tbody tr:nth-of-type(even) {
      background-color: var(--bg-gray-darker);
    }

    tbody tr.separator,
    tbody tr.totalSeparator,
    tbody tr.listTotal {
      background-color: var(--bg-gray);
    }
  }

  tr {
    td {
      border-bottom: 1px solid var(--bg-gray-darkest);
      padding: 0.5rem 1.5rem;
      line-height: 1.25rem;

      &.field {
        width: 6.5rem;
        border-right: 1px solid var(--bg-gray-darkest);
        text-align: right;
        color: var(--color-help-text);
        font-weight: bold;
      }

      &.previous {
        width: 13rem;
        border-right: 1px solid var(--bg-gray-darkest);
        text-align: right;
        padding: 1rem 1.5rem;
        font-weight: bold;
        font-size: var(--font-size-lg);
        color: var(--gray-600);

        &.corrected {
          color: var(--gray-500);
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23D0D5DD' /%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23D0D5DD' /%3E%3C/svg%3E");
          background-size: 100% 100%;
        }
      }

      &.value {
        width: 13rem;
        border-right: 1px solid var(--bg-gray-darkest);
        padding: 0;

        input {
          width: 100%;
          height: 4.5rem;
          &:focus,
          &:focus-visible {
            outline: none;
            border-color: var(--border-color-focus);
          }
        }

        input,
        :global(.formatted-overlay) {
          text-align: right;
          border: 2px solid transparent;
          padding: 1rem 1.5rem;
          font-size: var(--font-size-lg);
          font-style: normal;
        }

        :global(.formatted-overlay) {
          color: var(--gray-600);
          /* Cover whole input for the background color */
          inset: 0;
        }

        &.corrected :global(.formatted-overlay) {
          color: black;
          background-color: var(--color-success-bg);
        }

        &.readOnly span {
          display: block;
          height: 4.5rem;
          padding: 1rem 1.6rem;
          text-align: right;
          font-size: var(--font-size-lg);
          font-style: normal;
          font-weight: bold;
          line-height: 2.5rem;
          color: var(--text-color-body);
        }
      }

      &.title {
        color: var(--color-help-text);
      }
    }

    &:focus-within {
      td {
        background-color: var(--bg-highlight);
        color: var(--base-black);
      }
    }

    &.separator {
      td {
        border: 0;
        border-bottom: 1px solid var(--bg-gray-darkest);
        height: 1.5rem;
      }
    }

    &.listTotal {
      td.field {
        border-bottom: 0;
      }

      td.title {
        border: 0;
      }
    }

    &.totalSeparator {
      td.field,
      td.title {
        border: 0;
      }

      td.value {
        border-right: 0;
      }
    }

    &.total {
      td.title {
        font-weight: bold;
      }
    }
  }
}
