/* Control bar */
/* =========== */
.control-bar-container {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;

  justify-content: flex-start;
  align-items: center;

  padding: 0.5rem;

  background-color: var(--bs-dark-bg-subtle);

  @media (width <=576px) {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}

.control-bar-spacer {
  flex-grow: 1;

  @media (width <=576px) {
    display: none;
  }
}

.control-bar-button-container {
  display: flex;
  flex-direction: row;

  column-gap: 0.5rem;

  @media (width <=576px) {
    align-self: stretch;
    justify-content: stretch;
  }
}

.control-bar-button {
  flex-grow: 1;

  display: inline-block;

  text-decoration: none;
  font-weight: 500;

  &.control-bar-new-button {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
  }

  &.control-bar-back-button {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
  }

  &.control-bar-save-button {
    border-color: var(--bs-success);
    color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
  }
}