#actions-btn{

position: fixed;
bottom: 0.5rem;
left: 0rem;
padding: 2em;
width: calc(var(--panel-w) - 4em);
  z-index: 1000;
  --color-bg: var(--color-panel-bg);
  --color-text: var(--color-interface-800);

  display: flex;
  align-items: center;
  // align-content: stretch;
  gap: 1em;
  // background-color: var(--color-panel-bg);

  button{
    color: var(--color-text);

    // font-size: 1.2rem;
    font-family: var(--sans-serif);
    height: calc(var(--input-h)*1.25);
    padding: 0 1ch;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-weight: 500;
    background-color: var(--color-panel-bg);
    // width: 14ch;

    display: flex;
    align-items: center;
    // justify-content: center;
    gap: 0.5ch;
    margin-top: var(--space-xs);
    cursor: pointer;


    .icon{
      position: relative;
      top: 2px;
    }
    svg{
      width: 20px;
      height: 20px;
      fill: var(--color-text);
    }

    &.has-changes {
outline-offset: 2px;
      outline: 3px solid rgb(247, 98, 98);
   
    }
  }

  .error-tooltip{
    position: absolute;
    top: 0em;
    font-size: 10px;
    max-width: 20ch;
    color: rgb(247, 98, 98);
  }

}





.last-saved{
  position: absolute;
  padding-top: 0.75em;
   font-size: 10px;
    max-width: 20ch;
    color: var(--color-interface-400);


}


.save-button-wrapper {
  // position: fixed;
  // top: 2rem;
  // right: 5rem;
  // z-index: 1000;
  // display: flex;
  // flex-direction: column;
  // align-items: flex-end;
  // gap: 0.5rem;
}

// .save-btn {
//   width: 3.5rem;
//   height: 3.5rem;
//   border-radius: 50%;
//   border: none;
//   background: var(--color-interface-300, #ccc);
//   color: white;
//   cursor: not-allowed;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
//   transition: all 0.2s ease;
//   position: relative;
// }

// .save-btn.has-changes {
//   background: var(--color-page-highlight, #ff8a50);
//   cursor: pointer;
// }

// .save-btn.has-changes:hover {
//   transform: scale(1.1);
//   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
// }

// .save-btn.is-saving {
//   cursor: wait;
// }

// .save-btn.has-error {
//   background: #e74c3c;
// }

// .save-btn.save-success {
//   background: #2ecc71;
// }

// .save-icon,
// .success-icon {
//   width: 1.5rem;
//   height: 1.5rem;
// }

.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border-top: 2px solid white;
  border-right: 2px solid transparent;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// .last-saved {
//   font-size: 0.75rem;
//   color: var(--color-interface-600, #666);
//   background: white;
//   padding: 0.25rem 0.5rem;
//   border-radius: 0.25rem;
//   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
//   white-space: nowrap;
// }

// .error-tooltip {
//   position: absolute;
//   top: calc(100% + 0.5rem);
//   right: 0;
//   background: #e74c3c;
//   color: white;
//   padding: 0.5rem 0.75rem;
//   border-radius: 0.25rem;
//   font-size: 0.875rem;
//   white-space: nowrap;
//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
//   max-width: 15rem;
//   word-wrap: break-word;
//   white-space: normal;
// }