// Copyright (c) 2021 Julien Floret
// Copyright (c) 2021 Robin Jarry
// SPDX-License-Identifier: BSD-3-Clause

section {
  font-family: $font_mono;
  column-count: auto;

  > div,
  > div > div {
    break-inside: avoid;
    padding: 0.1rem;
  }
  h2,
  h3 {
    color: $secondary;
    font-weight: 500;
    font-family: $font_sans;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1.1rem;
  }
  hr {
    color: $secondary;
  }
}

section.base-links {
  > div {
    display: flex;
    flex-direction: row;
    justify-content: center;

    a {
      color: $white;
      font-weight: bold;
      font-size: 1.5rem;
      padding: 3 * $padding;
      margin: 2 * $padding;
      border-radius: $padding;
    }
    a.branches {
      background: $primary;
    }
    a.branches:hover {
      box-shadow: inset 0 0 0 4px lighten($primary, 10%);
    }
    a.products {
      background: $secondary;
    }
    a.products:hover {
      box-shadow: inset 0 0 0 4px lighten($secondary, 10%);
    }
  }
}

section.user-quotas {
  .quota {
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 20rem;
    margin: auto;

    .label {
      font-family: $font_sans;
      flex-grow: 1;
    }
    .value.danger {
      color: red;
    }
  }
}

section.files {
  > .artifact-formats {
    font-family: $font_mono;

    > .artifact-format {
      border-width: 1px;
      border-radius: $padding;
      border-color: $lightgray;
      display: inline-block;
      padding: 2 * $padding;
      margin: $padding;

      a {
        display: block;
      }
      a:hover {
        text-decoration: underline;
      }
      a.format {
        color: $primary;
      }
      a.digest {
        color: $secondary;
        font-style: italic;
      }
    }
    > .artifact-format:hover {
      background-color: lighten($lightgray, 5%);
    }
  }

  > .whole-archive {
    font-family: $font_mono;
    padding: $padding;

    a:hover {
      text-decoration: underline;
    }
  }

  > .command {
    display: block;
    background: lighten($lightgray, 5%);
    padding: 1.5 * $padding;
    margin: $padding;
    overflow: auto;
    border-radius: $padding;
    border-width: 1px;
    border-color: $lightgray;
    font-weight: 300;
    font-size: 0.9rem;
  }
}

section.job-metadata {
  .metadata {
    padding: $padding;
    margin: 0;

    .key:after {
      content: ": ";
    }
    .value {
      font-weight: 800;
    }
  }

  .metadata:hover {
    background-color: lighten($lightgray, 5%);
  }
}

section.autoindex {
  a:hover {
    text-decoration: underline;
  }
  a.directory {
    color: $primary;
  }
  a.digest {
    color: $secondary;
    font-style: italic;
  }
}

section.tag-status {
  display: flex;
  flex-direction: row;

  > .badge {
    padding: 0.1rem 0.5rem;
    margin: 0.4rem;
    font-size: 0.8rem;
    font-family: $font_mono;
    border-width: 1px;
    border-radius: 2px;
    border-color: $lightgray;
    display: inline-block;
    background-color: white;
  }
  > .badge:hover {
    background-color: lighten($lightgray, 5%);
  }
  > .badge.released {
    font-weight: bold;
    background-color: $released;
  }
  > .badge.released:hover {
    background-color: darken($released, 5%);
  }
  > .badge.locked {
    font-weight: bold;
    background-color: $locked;
  }
  > .badge.locked:hover {
    background-color: darken($locked, 5%);
  }
}
