.case-card-attr {
  touch-action: none;
  height: 25px;

  &:nth-child(2) {
    .case-card-attr-value {
      border-top: solid 1px #b2b2b2;
    }
  }

  .case-card-attr-name {
    box-sizing: border-box;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    padding: 1px 8px 2px 24px;
    position: relative;
    text-align: right;
    white-space: nowrap;
    width: 50%;

    .codap-column-header-content {
      &:hover {
        color: #1b5798 !important; // overrides Charkraui default color
        span {
          text-decoration: underline;
        }
      }
    }
  }

  .case-card-attr-value {
    background-color: white;
    border: solid 1px #b2b2b2;
    border-top: none;
    font-weight: 500;
    padding: 0;
    text-align: left;
    width: 50%;

    &.editable {
      cursor: text;
    }

    &.numeric {
      text-align: right;
    }

    .case-card-attr-value-text {
      white-space: nowrap;

      &.static-summary {
        font-style: italic;
        height: 25px;
        padding: 4px;
        text-align: left;
      }

      span {
        border-radius: 0;
        display: inline-block;
        height: 25px;
        padding: 4px;
        position: relative;
        width: 100%;

        // add space to guarantee cell height if value is empty string
        &:empty::after{
          content: "\00a0";
        }
      }
    }

    .case-card-attr-value-color {
      width: calc(100% - 4px);
      height: 20px;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      .cell-span {
        display: inherit;
        width: calc(100% - 4px);
        margin-top: 0.5px;
      }
      .cell-color-swatch {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .cell-color-swatch-interior {
          width: calc(100% - 4px);
          height: 100%;
          margin-top: 0.5px;
        }
      }
    }

    .case-card-attr-value-checkbox {
      display: flex;
      align-items: center;
      height: 25px;
      padding: 4px;

      span {
        height: 13px;
      }
    }

    .rdg-text-editor {
      display: inline-block;
      padding: 4px;
    }

    input.case-card-attr-value-text-editor {
      display: inline-block;
      height: 25px;
      padding: 4px;
    }

    .formula-attr-value {
      background-color: rgba(255, 255, 0, 0.2);
      font-style: italic;
      input {
        pointer-events: none;
      }
    }
  }

  .index-column-header {
    height: 0;
  }
}
