@import "colors.css";

.new-workout-controls {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

.workouts {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }
}

.workout {
  display: flex;
  flex-direction: column;
  background-color: var(--color-2);
  border: solid;
  border-color: var(--color-3);
  border-width: 2px;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 0 12px var(--color-2);
  width: 100%;
  height: 15rem;

  @media (min-width: 768px) {
    width: auto;
  }
}

.workout a {
  font-size: 1.5rem;
}

.workout:hover {
  box-shadow: 0 0 12px var(--color-3);
}

.workout-checkbox-entry {
  display: flex;
  flex-direction: row;
}

.workout-card-top {
  height: 10%
}

.workout-card-content {
  display: flex;
  flex-direction: column;
  height: 70%;
  padding-top: 1rem;
}

.workout .tags {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.workout-card-bottom {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}

.workout .tag {
  height: fit-content;
}