.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 .form-control {
  width: 100%;
  /* Ensures padding & border is included in width */
  box-sizing: border-box; 
}

.exercise-set-log-field-set .form-check-input {
  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: #d4edda;
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }
  70% {
    background-color: #d4edda;
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }
  100% {
    background-color: transparent;
    border-color: #ced4da;
    box-shadow: none;
  }
}

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