:root {
  --full-primary-color: rgb(255, 215, 0);
  --full-dark-text: rgb(19, 23, 30);
  --full-border-radius: 8px;

  --bs-success-rgb: 53, 169, 86;
  --bs-danger-rgb: 255, 69, 5;
}

body:not(#as) {
  .btn-full-primary {
    background-color: var(--full-primary-color);
    color: var(--full-dark-text);
    border-radius: var(--full-border-radius);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    line-height: var(--bs-btn-line-height);
    border: unset !important;
    font-weight: 500;
  }
}

body * {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-color: #344054;
  --bs-btn-border-color: #00000010;
  --bs-btn-hover-bg: #fcfcfc;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--full-primary-color);
  --bs-nav-pills-link-active-color: var(--full-dark-text);
  --bs-link-color: var(--full-dark-text);
  --bs-nav-link-hover-color: var(--full-dark-text);
}

.nav-filter-pill input {
  display: none;
}

.nav-filter-pill label {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 5px;
  color: #667085;
  background: #fff;
  transition: all 150ms;
  cursor: pointer;
}

.nav-filter-pill {
  gap: 10px;
}

.nav-filter-pill label:hover {
  background: #f5f7fb;
}

.nav-filter-pill input:checked + label {
  background: var(--full-primary-color);
  color: var(--full-text-dark);
}

aside {
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #aeb4c0 #e9ecf1;
  transition: all 150ms ease;
}

aside.is-visible {
  translate: 0;
}

.repository-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.repository-item {
  cursor: pointer;
}

.repository-item__thumbnail {
  border-radius: 8px;
  border: solid 1px transparent;
  transition: all 150ms ease;
}

.repository-item__thumbnail img {
  display: block;
  object-fit: cover;
  aspect-ratio: 64/45;
  border-radius: 8px;
}

.repository-item__overlay {
  transition: all 150ms;
}

.repository-item .badge {
  background: #cfe7f8;
  font-weight: 500;
  color: #5298dd;
  text-transform: uppercase;
  padding: 4px 8px;
}

.repository-item__actions {
  opacity: 0;
  transition: all 150ms;
}

.repository-item:hover .repository-item__thumbnail {
  border-color: var(--full-primary-color);
}

.repository-item:hover .repository-item__actions {
  opacity: 1;
}

.repository-item.kit .repository-item__actions button {
  display: none;
}

@media (max-width: 768px) {
  aside {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 9;
    translate: 100% 0;
  }
}

.requirement-badge {
  display: inline-block;
  background-color: #eef1f6;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  user-select: none;
}