@use "../vars";
@use "../case-tile-common/case-tile-vars" as cardVars;

.case-card.react-data-card {
  height: calc(100% - vars.$title-bar-height);
  overflow-x: hidden;
  overflow-y: auto;
}

.codap-case-card {
  overflow: auto hidden;
  position: relative;

  .attribute-drag-overlay {
    display: inline-flex;
    padding: 0 5px;
    width: auto;
  }

  .codap-attribute-header-divider {
    position: absolute;
    background: #ffff00;
    height: 0;
    margin-top: -3px;
    opacity: 0;
    pointer-events: none;
    width: 100%;

    &.over {
      opacity: 100%;
      height: 6px;
    }
  }

  input.column-name-input,
  input.collection-title-input,
  input.case-card-attr-value-text-editor {
    border: solid 1.5px cardVars.$input-border-color;
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    min-width: 50px;
    outline: none;
    padding: 4px;
    text-align: left;
    white-space: nowrap;
    width: 100%;

    &:focus, &:focus-visible {
      box-shadow: none;
    }
  }

  .collection-title {
    font-family: "noto-sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: black;
    input.collection-title-input {
      padding: 2px 4px;
    }
  }
}
