/* Root variables */
:root {
  --quarto-blue: #3a78b1;
  --spinner-size: 5rem;

  /* Site Grid Variables */
  --sites-grid-columns: 0;
  --sites-grid-column-gap: 1.5rem;
  --site-grid-entry-width: 21.5rem;
  --site-grid-entry-screenshot-height: calc(
    9 * var(--site-grid-entry-width) / 16
  );

  /* Site List Variables */
  ----site-list-entry-screenshot-width: 6rem;
  --site-list-entry-screenshot-height: calc(
    9 * var(----site-list-entry-screenshot-width) / 16
  );
  --site-list-title-text-align: 0;
  --site-list-columns: 0;
  --site-list-optional-column-display: 0;

  /* Main Wrapper Width */
  --wrapper-width: 0;

  /* Footer Variables */
  --footer-height: 0;
  --footer-font-size: 0;
  --footer-legal-link-left-margin: 0;
  --copyright-word-display: none;
}

/* Body */
body {
  font-family: "Lucida Grande", sans-serif;
}

/* Loading Spinner */
#loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--spinner-size);
  height: var(--spinner-size);
  background-size: 5rem 5rem;
  animation: loading-spinner 1.75s 0.5s infinite ease-in-out;
}

@keyframes loading-spinner {
  0% {
    background-image: url("./quarto-logo-blue.png");
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    background-image: url("./quarto-logo-blue.png");
    transform: rotateX(-180.01deg) rotateY(0deg);
  }
  100% {
    background-image: url("./quarto-logo-blue.png");
    transform: rotateX(-180deg) rotateY(-179.99deg);
  }
}

/* Application */
#application {
  display: none;
}

/* Header */
#header {
  background: var(--quarto-blue);
  height: 4rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

/* Action Bar */
#action-bar {
  align-items: center;
  display: grid;
  font-size: 1.125rem;
  font-weight: 300;
}

a#quarto-pub-logo {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 4rem;
  text-decoration: none;
}

img#quarto-pub-logo-icon {
  height: 2rem;
  width: 2rem;
}

#quarto-pub-logo-title {
  color: #fff;
  display: flex;
  padding-left: 0.5rem;
  text-transform: lowercase;
}

#action-bar-name {
  align-items: center;
  color: #fff;
  display: flex;
}

/* Bottom Arc */
#bottom-arc {
  background: var(--quarto-blue);
  height: 0.625rem;
  margin-top: -1.25rem;
  width: 100%;
}

/* Options */
#options-container {
  position: fixed;
  left: 50%;
  top: 4rem;
  transform: translate(-50%);
  padding-top: 0rem;
  z-index: 1;
}

#options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--wrapper-width);
  height: 4rem;
}

/* List / Grid Control */
#list-grid-control-container {
  cursor: pointer;
  user-select: none;
  background: #e4eaf2;
  padding: calc(0.125rem / 2);
  border-radius: 0.25rem;
  height: calc(1.5rem + 0.125rem);
  position: relative;
  width: calc(3rem + 0.125rem);
}

#list-grid-control {
  background: #e4eaf2;
  border-radius: 0.25rem;
  height: 1.5rem;
  position: relative;
  width: 3rem;
}

#list-grid-control-list {
  position: absolute;
  left: 0;
  width: 1.5rem;
  display: flex;
  background-image: url("./list-blue.png");
  background-size: 0.75rem 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}

#list-grid-control-grid {
  position: absolute;
  right: 0;
  width: 1.5rem;
  display: flex;
  background-image: url("./grid-blue.png");
  background-size: 0.75rem 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}

.list-grid-control-indicator {
  position: absolute;
  width: 1.5rem;
  display: flex;
  height: 1.5rem;
  background: #4e78b1;
  border-radius: 0.25rem;
  background-image: url("./list-white.png");
  background-color: #4e78b1;
  background-size: 0.75rem 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.25s ease 0s;
  transition: margin-left 0.25s ease 0s;
}

.list-grid-control-indicator-right {
  background-image: url("./grid-white.png");
  margin-left: 1.5rem;
}

/* Sorting */
#sorting-title {
  color: #777;
  font-size: 0.85rem;
  margin-right: 0.5rem;
}

.sorting-dropdown-menu {
  padding: 0 0;
}

.sorting-dropdown-menu-button {
  background-color: #4e78b1;
  color: #fff;
  border: 0px;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(1.5rem + 0.125rem);
  position: relative;
  width: 6rem;
  font-size: 0.85rem;
  padding: 0 0;
  padding: 0 0.75rem;
}

.sorting-menu-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}

span.sorting-menu-item-title {
  font-size: 0.85rem;
}

.sorting-menu-item:hover {
  color: #fff;
  background: #4e78b1;
}

.sorting-menu-item:focus {
  color: #fff;
  background: #4e78b1;
}

.sorting-menu-item:active {
  background: #4e78b1;
}

span.sorting-title {
  margin-right: 0.25rem;
}

/* Sites Grid */
#sites-grid-container {
  overflow-y: scroll;
  position: fixed;
  top: 7.25rem;
  padding-top: 0.75rem;
  width: 100%;
  bottom: 0;
}

#sites-grid-wrapper {
  position: relative;
  left: 50%;
  min-height: 100%;
  transform: translate(-50%);
  width: var(--wrapper-width);
}

#sites-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--sites-grid-columns),
    var(--site-grid-entry-width)
  );
  column-gap: var(--sites-grid-column-gap);
}

.site-grid-entry {
  width: var(--site-grid-entry-width);
  margin-bottom: 1.75rem;
}

.site-grid-entry-screenshot {
  border: calc(0.125rem / 2) solid #ddd;
  width: var(--site-grid-entry-width);
  height: var(--site-grid-entry-screenshot-height);
  box-shadow: 2px 2px 19px -15px #000000;
}

.site-grid-entry-info {
  margin-top: -0.25rem;
  color: var(--quarto-blue);
  font-size: 0.85rem;
}

.site-grid-entry-updated {
  color: #777;
  font-size: 0.75rem;
  margin-top: -0.2rem;
}

span.site-grid-entry-updated-time {
  color: #777;
}

a.site-url {
  color: var(--quarto-blue);
  text-decoration: none;
}

a.site-url:hover {
  text-decoration: underline;
}

/* Sites List */
#sites-list-header-container {
  display: none;
  position: fixed;
  top: 8rem;
  height: 2rem;
  left: 50%;
  transform: translate(-50%);
  width: var(--wrapper-width);
}

#sites-list-header {
  height: 1.75rem;
  color: #777;
  display: grid;
  font-size: 0.85rem;
  grid-template-columns: var(--site-list-columns);
  border-bottom: 1px solid #777;
  width: var(--wrapper-width);
}

#sites-list-container {
  display: none;
  overflow-y: scroll;
  position: fixed;
  top: 10rem;
  width: 100%;
  bottom: 0;
}

#sites-list-wrapper {
  position: relative;
  left: 50%;
  min-height: 100%;
  margin-bottom: 1rem;
  transform: translate(-50%);
  width: var(--wrapper-width);
}

#sites-list {
  display: grid;
  row-gap: 1rem;
}

.site-list-entry {
  display: grid;
  grid-template-columns: var(--site-list-columns);
  align-items: center;
  row-gap: 1rempx;
}

.site-list-entry-screenshot {
  border: calc(0.125rem / 2) solid #ddd;
  width: var(----site-list-entry-screenshot-width);
  height: var(--site-list-entry-screenshot-height);
  box-shadow: 2px 2px 19px -15px #000000;
}

.site-list-title-title {
  text-align: var(--site-list-title-text-align);
}

.site-list-entry-title {
  color: var(--quarto-blue);
  font-size: 0.85rem;
  text-align: var(--site-list-title-text-align);
}

.site-list-title-type {
  display: var(--site-list-optional-column-display);
  font-size: 0.85rem;
}

.site-list-entry-type {
  display: var(--site-list-optional-column-display);
  color: var(--quarto-blue);
  font-size: 0.85rem;
}

.site-list-title-last-updated {
  display: var(--site-list-optional-column-display);
  color: #777;
  font-size: 0.85rem;
  text-align: right;
}

.site-list-entry-last-updated {
  display: var(--site-list-optional-column-display);
  color: #777;
  font-size: 0.85rem;
  text-align: right;
}

.footer {
  width: 100%;
  height: var(--footer-height);
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  color: #777;
  font-size: var(--footer-font-size);
}

.footer-foo {
  display: flex;
  align-items: center;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

span.copyright-word {
  display: var(--copyright-word-display);
}

.lefty-margin {
  margin-left: 10px;
}

a.footer-link {
  cursor: pointer;
  text-decoration: none;
  color: #777;
}

a.footer-link:hover {
  text-decoration: underline;
}

a.footer-legal-link {
  margin-left: var(--footer-legal-link-left-margin);
}

/* Narrow */
@media screen {
  :root {
    --sites-grid-columns: 1;
    --wrapper-width: var(--site-grid-entry-width);
    --site-list-columns: 8rem 1fr;
    --site-list-title-text-align: right;
    --site-list-optional-column-display: none;
    --footer-height: 2rem;
    --footer-font-size: 0.6rem;
    --footer-legal-link-left-margin: 1rem;
    --copyright-word-display: none;
  }

  #action-bar {
    grid-template-columns: auto auto;
    padding: 0 1.5rem;
  }
  #action-bar-name {
    justify-content: right;
  }
}

/* Normal */
@media screen and (min-width: 50em) {
  :root {
    --sites-grid-columns: 2;
    --wrapper-width: calc(
      (var(--site-grid-entry-width) * 2) + var(--sites-grid-column-gap)
    );
    --site-list-columns: 8rem 1fr 12rem 8rem;
    --site-list-title-text-align: left;
    --site-list-optional-column-display: inline;
    --footer-height: 2.5rem;
    --footer-font-size: 0.85rem;
    --footer-legal-link-left-margin: 1.5rem;

    --copyright-word-display: inline;
  }

  #action-bar {
    grid-template-columns: 10rem auto 10rem;
    padding: 0 2rem;
  }
  #action-bar-name {
    justify-content: center;
  }
}

/* Wide */
@media screen and (min-width: 75em) {
  :root {
    --sites-grid-columns: 3;
    --wrapper-width: calc(
      (var(--site-grid-entry-width) * 3) + (var(--sites-grid-column-gap) * 2)
    );
  }
}

/* Ultrawide */
@media screen and (min-width: 100em) {
  :root {
    --sites-grid-columns: 4;
    --wrapper-width: calc(
      (var(--site-grid-entry-width) * 4) + (var(--sites-grid-column-gap) * 3)
    );
  }
}