@layer components {
/*
  Place all the styles related to the matching controller here.
  They will automatically be included in application.css.
*/
.sr_templates tr.disabled, p.sr_template.disabled{
    text-decoration: line-through;
}

.sr-template-form {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}

.sr-template-form__schedule {
  display: flex;
  flex: 1 0 auto;
  padding: 1rem 0;
  flex-direction: row;

  gap: 1rem;
  align-items: top;
}

.sr-template-form__schedule > div:has(span.or) {
  flex-grow: 0;
  width: 8ch;
}


.sr-template-form__schedule > div {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  input, select {
    padding: 0.5rem;
  }
}

.sr-template-form__schedule > div.active {
  background-color: var(--neutral-100);
}
}