.sample-row {
  &:hover {
    background-color: #fafafa;
  }

  .variables-column,
  .prompt-column,
  .result-column {
    width: 30%;
  }

  .action-column {
    width: 10%;
    height: 100%;
  }

  .status-selector-wrapper {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
  }

  .status-selector {
    padding: 5px;
    border: 1px solid #666;
    background: white;
    min-width: 100px;
  }

  .action-buttons {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
  }

  .text-input-wrapper {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;

    .text-input {
      color: rgb(107 114 128 / var(--tw-text-opacity));
      line-height: 1.4;
    }

    .prompt-value-display {
      width: inherit;
      height: fit-content;

      font-size: 0.85rem;
      font-family: monospace;
      white-space: pre-wrap;
      overflow-y: auto;
      cursor: text !important;

      background-color: transparent;
      border-color: transparent;
    }

    .sample-row-textarea {
      width: inherit;
      height: 100%;
      max-height: 500px;
      font-size: 0.85rem;
      font-family: monospace;
      white-space: pre-wrap;
      overflow-y: auto;
      cursor: text !important;

      &:not(:focus, :hover) {
        background-color: transparent;
        border-color: transparent;
      }
    }

    .prompt-value-display,
    .sample-row-textarea {
      max-height: 500px;
    }
  }

  .action-button-loader {
    position: relative;
    top: 6px;

    width: 30px;
    height: 25px;

    border-top-color: #3498db;
    border-left-color: white;
    border-right-color: white;
    border-bottom-color: white;
    -webkit-animation: action-button-spinner 1.5s linear infinite;
    animation: action-button-spinner 1.5s linear infinite;
  }

  @-webkit-keyframes action-button-spinner {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes action-button-spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
