@use './variables.module.scss';

.attribute {
  display: flex;
  font-family: monospace;
  font-weight: bold;
  font-size: variables.$fontsize;
  border-radius: 2px;
}

// .handle {
//   border: 0px;
//   border-radius: 10px;
//   left: 12px;
//   width: 7px;
//   height: 7px;
//   margin-bottom: 11px;
//   background: rgba(255, 255, 255, 0.6);
//   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
//   transform-origin: center;
// }

.contentWrapper {
  display: flex;
  align-items: center;

  .content {
    padding: variables.$ypad 0 variables.$ypad 1ch;
    max-width: 15ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.attributeInput {
  float: right;
  padding: 0 1ch 0 0;
  display: flex;
  align-items: center;

  input {
    background-color: rgba(100, 100, 100, 0.1);
    font-family: monospace;
    font-size: variables.$fontsize;
    border: 1px solid rgba(100, 100, 100, 0.3);
    border-radius: 2px;
    height: variables.$height;
    outline: none;
    transition: border 0.3s;
    color: black;
    &::placeholder {
      color: black;
    }

    &:focus {
      border: 1px solid rgba(0, 0, 0, 0.3);
    }
  }
}