.exercise-log-form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem;

  .exercise-log-form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.exercise-set-logs-form-container {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.5rem 0 0.5rem;
}

/*
This makes these elements 'transparent'
so that the grid layout can be applied to
their children instead.
*/
.exercise-set-logs-form-container__headers,
.exercise-set-log-fields,
.exercise-set-log-field-set {
  display: contents;
}

.exercise-set-logs-form-container .btn {
  grid-column: 1 / -1;
  margin-top: 1rem;
}

/*
The per-set delete button lives in the 3rd ("Delete") column, in the
same row as its weight/reps fields — not full-width like the
Add-set / delete-exercise buttons above.
*/
.exercise-set-log-field-set .btn {
  grid-column: auto;
  margin-top: 0;
  justify-self: center;
}

.exercise-set-log-field-set .input {
  width: 100%;
  box-sizing: border-box;
}

.exercise-set-logs-form-container__headers {
  font-weight: bold;
}

/*
The 3rd column of the grid is for the delete button,
so it isn't rendered unless the item is persisted.
In the case that the 3rd column is empty, and therefore,
the "Delete" header won't display, we want to
make sure the other columns are still aligned properly.
This ensures that the form fields start in a new row.
*/
.exercise-set-log-field-set input[name*="[weight]"] {
  grid-column: 1;
}

@keyframes field-success {
  0% {
    background-color: oklch(0.8 0.1 145);
    border-color: oklch(0.6 0.2 145);
    box-shadow: 0 0 0 0.2rem oklch(0.6 0.2 145 / 0.25);
  }
  70% {
    background-color: oklch(0.8 0.1 145);
    border-color: oklch(0.6 0.2 145);
    box-shadow: 0 0 0 0.2rem oklch(0.6 0.2 145 / 0.25);
  }
  100% {
    background-color: transparent;
    border-color: var(--color-base-300);
    box-shadow: none;
  }
}

.field-saved {
  animation: field-success 6s ease-out forwards;
}