/*
 * 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.
 */
#mainNav {
  img {
    background-color: var(--pico-contrast-focus);
    border-radius: var(--pico-border-radius);
  }
  button {
    border: none;
    margin-bottom: 0;
  }
}

#flash_messages {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;

  .flash {
    border-radius: var(--pico-border-radius);
    color: white;
    font-weight: bold;
    margin: 0.5rem 0;
    padding: 0.5rem;

    button {
      border: 0;
      float: right;
      padding: 0 1rem;
    }
  }
}

.alert {
  background-color: var(--pico-form-element-invalid-active-border-color);
}

.notice {
  background-color: var(--pico-form-element-valid-active-border-color);
}

:where(input, select, textarea, fieldset, .grid) + small {
  margin-top: 0;
}

details summary {
  h2 {
    display: inline-block;
  }

  &::after {
    background-size: 2rem;
    height: 2rem;
    width: 2rem;
  }
}

tr.cancelled td {
  text-decoration: line-through;

  &.actions {
    text-decoration: none;
  }
}

.label {
  background-color: var(--pico-contrast-background);
  border-radius: var(--pico-border-radius);
  color: var(--pico-contrast-inverse);
  font-weight: bold;
  margin: 0.5rem 0;
  padding: 0.5rem;
}

span.theme-switcher {
  button {
    font-size: 2rem;
    border: none;
  }
}

div.attendee-answer {
  margin: 1rem 0;

  span {
    margin-left: 1rem;

    &.presence {
      font-size: 150%
    }
    &.reason {
      &:hover {
        cursor: copy;
      }
      &:after {
        content: " 📋";
      }
    }
  }
}