.cook-mode {
  border-top: 2px solid #cbcbcb;
  border-bottom: 2px solid #cbcbcb;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 48rem) {
  .cook-mode {
    flex-direction: row;
    justify-content: start;
  }

  .cook-mode .cook-mode-description {
    padding-left: 0.5rem;
  }
}

.cook-mode-toggle label {
  display: flex;
  align-items: center;
}

.cook-mode:focus-within .cook-mode-toggle {
  outline: 2px solid #da1a32;
}

.cook-mode .cook-mode-label {
  color: #000;
  font-family: Para Supreme;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  height: 2rem;
  line-height: 2rem;
  text-transform: capitalize;
  padding-left: 0.5rem;
  white-space: nowrap;
}

.cook-mode .cook-mode-description {
  font-family: Brandon Grotesque;
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 390;
}

.cook-mode svg {
  vertical-align: middle;
  cursor: pointer;
}

.cook-mode svg ellipse {
  transition: transform ease 250ms, fill ease 250ms;
}

.cook-mode.checked svg ellipse {
  transform: translate(20px, 0px);
  fill: #fbb040;
}