/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

main {
  padding-top: 0.5rem !important;
}

header {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.sticky {
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  background: var(--pico-background-color);
  z-index: 9999;
  border-bottom: solid thin var(--pico-muted-border-color);
}

form[aria-busy="true"]::before {
  all: unset;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  input, select { margin: 0; }
}

.add-todo, .todo {
  margin: 1rem 0;
}

.todo {
  padding-left: 1rem;
  border-left: solid 3px var(--pico-form-element-border-color);

  .complete {
    opacity: 0.35;
    text-decoration: line-through;
  }
}

.github-link {
  margin: 0 0.25rem;
}

.button-link {
  width: unset !important;
  background: none !important;
  border: none;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--pico-primary-underline);
  color: var(--pico-primary);
  &:hover {
    color: var(--pico-primary-hover);
    text-decoration: unserline;
  }
}

.actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.button_to {
  width: unset;
}

.priority-indicator {
  font-weight: bold;
  text-align: center;
}

.priority-low {
  color: #28a745;
}

.priority-medium {
  color: #ffc107;
}

.priority-high {
  color: #dc3545;
}

.sort-options {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sort-options a.active {
  border-bottom: solid 2px var(--pico-primary-underline);
}

.priority-select {
  width: auto;
  min-width: 100px;
}

.tag-link {
  background-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  margin: 0 0.25rem;
}

.tag-link:hover {
  background-color: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}