@layer landing, base, main, override;

/* theme.css */
:root {
  --background-color: rgb(33, 37, 41);
  --icon-color: #e3e3e3;
  --font-color: #f6f6f6;
  --font-size: 16px;
  --small-screen-breakpoint: 768px;
  --medium-screen-breakpoint: 1476px;
}

/* defaults.css */
@layer base {
  a {
    color: var(--font-color);
  }
}

/* on-page-load-fixes.css */
@layer main {
  *:not(:defined) {
    visibility: hidden;
  }
  body {
    background-color: var(--background-color);
    visibility: visible;
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }
}

/* icons.css */
@layer main {
  .icon {
    width: 26px;
    height: 26px;
    fill: var(--icon-color);
  }
  .small-icon {
    width: 22px;
    height: 22px;
    fill: var(--icon-color);
  }
  .medium-icon {
    width: 32px;
    height: 32px;
    fill: var(--icon-color);
  }
  .large-icon {
    width: 125px;
    height: 125px;
    fill: var(--icon-color);
  }
}

/* fonts.css */
@layer main {
  :root {
    color: var(--font-color);
    font-family:
      "Segoe UI",
      Tahoma,
      Geneva,
      Verdana,
      sans-serif;
    font-size: var(--font-size);
  }
}

/* header.css */
@layer main {
  .header {
    display: flex;
    flex-direction: row;
  }
  .header > a,
  .header > header-tab {
    color: var(--font-color);
    font-size: 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: end;
    line-height: 16px;
  }
  .header > .main-link {
    font-weight: 800;
    font-size: 26px;
    line-height: 26px;
    padding-top: 1rem;
    padding-left: 0.5rem;
    padding-right: 1rem;
  }
}

/* forms.css */
@layer main {
  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .form-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
  }
  .form-column {
    display: flex;
    flex-direction: column;
  }
  .form-column > label {
    font-size: 16px;
    margin-left: 1rem;
    margin-bottom: 0.2rem;
  }
  .form-column > input[type=text],
  input[type=password] {
    height: 2rem;
    font-size: 16px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: #ddd;
    border: none;
    border-radius: 4px;
  }
  .form-column > *[type=submit] {
    height: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #999;
    border: none;
    border-radius: 4px;
  }
  .form-row > button,
  .form-column > button {
    background-color: #999;
    border-radius: 4px;
    border: 2px #777;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
  }
  .form-row > button:disabled,
  .form-column > button:disabled {
    background-color: #666;
  }
}

/* data.css */
*[data-visibility=hidden] {
  display: none;
}

/* js-component/radio-control.css */
@layer base {
  radio-control:first-of-type {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  radio-control:last-of-type {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  radio-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border: 1px solid gray;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  radio-control:has(+ radio-control) {
    margin-right: 0;
  }
  radio-control + radio-control {
    margin-left: 0;
  }
}

/* js-component/index.css */

/* input.css */
@layer main {
  label {
    &:has(input[type=checkbox]) {
      background-image: url('data:image/svg+xml,<svg%0A    xmlns="http://www.w3.org/2000/svg"%0A    height="48px"%0A    viewBox="0 -960 960 960"%0A    width="48px"%0A    fill="%23e3e3e3"%0A>%0A    <path%0A        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"%0A    />%0A</svg>%0A');
      background-size: contain;
      background-repeat: no-repeat;
    }
    &:has(input[type=checkbox]:checked) {
      background-image: url('data:image/svg+xml,<svg%0A    xmlns="http://www.w3.org/2000/svg"%0A    height="48px"%0A    viewBox="0 -960 960 960"%0A    width="48px"%0A    fill="%23e3e3e3"%0A>%0A    <path%0A        d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"%0A    />%0A</svg>%0A');
    }
    input[type=checkbox] {
      appearance: none;
    }
  }
}

/* gallery.css */
@layer override {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
}

/* file-manager.css */
@layer override {
  .file-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .file-row {
    display: grid;
    grid-template-columns: 2rem 2rem 1fr;
    align-content: center;
    max-width: 95vw;
  }
  .file-row > div > a {
    color: var(--font-color);
  }
  drop-down {
    margin-top: 1rem;
  }
  .action-buttons > button {
    cursor: pointer;
  }
  .file-checkbox {
    height: 26px;
  }
}

/* logon.css */
@layer override {
  .hero-button {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: bold;
    font-size: large;
  }
}

/* control-panel.css */
@layer override {
  .sort-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* screen-specific/xl.css */
@media (min-width: 2016px) {
  @layer main {
    :root {
      --file-card-max-height: 13rem;
      --thumbnail-hover-max-width: 22.5rem;
    }
  }
}

/* screen-specific/l.css */
@media (min-width: 1477px) and (max-width: 2015px) {
  @layer main {
    :root {
      --file-card-max-height: 13rem;
      --thumbnail-hover-max-width: 17.5rem;
    }
  }
}

/* screen-specific/m.css */
@media (min-width: 841px) and (max-width: 1476px) {
  @layer main {
    :root {
      --file-card-max-height: 13rem;
      --thumbnail-hover-max-width: 13.5rem;
    }
  }
}

/* screen-specific/s.css */
@media (min-width: 624px) and (max-width: 840px) {
  @layer main {
    :root {
      --file-card-max-height: 13rem;
      --thumbnail-hover-max-width: 7.5rem;
    }
  }
}

/* screen-specific/xs.css */
@media (max-width: 623px) {
  @layer main {
    :root {
      --file-card-max-height: 13rem;
      --thumbnail-hover-max-width: 7.5rem;
    }
  }
}

/* index.css */