@import url(../_common/style.css);

.input {
  width: 100%;
  font-size: var(--font-size-h1);
  &:placeholder-shown {
    letter-spacing: normal;
  }
}

[page="streaks"] {
  padding: 0 20px;
  min-height: 100%;
  grid-template-rows: auto auto 1fr;
}

.modules {
  --width: 300px;
  --height: 170px;
  --main-gap: 20px;
  --star-size: 15px;
  font-family: var(--main-font);
  display: grid;
  gap: var(--main-gap);
  & .module {
    padding: var(--main-gap);
    border-radius: 10px;
    display: grid;
    opacity: 1;
    transition: opacity 150ms ease-in;
    &:has(.content-container:empty) {
      display: none;
    }
    &.hidden {
      opacity: 0;
      pointer-events: none;
    }
    &.all-loaded {
      & .module-header {
        & .module-name {
          pointer-events: none;
        }
        & .module-more {
          display: none;
          pointer-events: none;
        }
      }
    }
    & .module-header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      margin-bottom: var(--main-gap);
      & > * {
        grid-row: 1;
        margin: 0;
        color: var(--color-lightest-all);
        transition-duration: 0.1s;
        pointer-events: none;
        &.clickable {
          pointer-events: all;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      & .module-name {
        grid-column: 1/3;
        font-weight: 500;
        width: fit-content;
        justify-self: center;
        text-align: center;
      }
      & .module-more {
        grid-column: 2;
        font-weight: 300;
      }
    }
  }
}

@media screen and (max-width: 650px) {
  .modules {
    & .module {
      & .module-header {
        .module-more {
          grid-column: 1/3;
          grid-row: 2;
          text-align: center;
          margin-top: 5px;
        }
      }
    }
  }
}