.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 2fr 0.5fr;
  gap: 1rem;
  align-items: center;
}

/*
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;
}

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

.exercise-set-log-field-set .checkbox {
  justify-self: center;
}

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

/*
The 4th column of the grid is for the delete button,
so it isn't rendered unless the item is persisted.
In the case that the 4th 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;
}