@charset "UTF-8";
button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  display: grid;
  block-size: 100%;
  grid-auto-rows: max-content;
  justify-content: center;
  padding: 95px 24px 95px 24px;
  overflow: auto;
}

.licenses-descriptions-list, .licenses-names-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-wrapper {
  max-inline-size: 1000px;
  display: grid;
  gap: var(--spacing-gap-xxxl);
}

.logo {
  inline-size: 201px;
  block-size: 41px;
  margin: 0 auto;
  margin-block-end: 40px;
  opacity: 0;
  transform: translateY(4px);
  animation: showLogo var(--timing-regular) ease-out forwards;
  animation-delay: var(--timing-regular);
  background-color: var(--color-icon-neutral-default);
}

@keyframes showLogo {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.card {
  display: grid;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--elevation-border-color);
  border-style: solid;
  padding: var(--spacing-padding-xxl);
  gap: var(--spacing-gap-xl);
  opacity: 0;
  animation: showCard var(--timing-fast) ease-out forwards;
  animation-delay: calc(var(--timing-regular) * 2);
}

@keyframes showCard {
  100% {
    opacity: 1;
  }
}
h1.title {
  font-weight: var(--font-style-semi-bold);
}

.intro-container {
  display: grid;
  gap: var(--spacing-gap-xl);
}

.date-container {
  display: grid;
  gap: var(--spacing-gap-l);
}

.card-package {
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.package-name {
  --package-name-color: var(--color-text-primary-default);
  color: var(--package-name-color);
}
.package-name a {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
}
.package-name.has-link:hover {
  --package-name-color: var(--color-text-primary-hover);
}
.package-name.has-link:active {
  --package-name-color: var(--color-text-primary-pressed);
}

.package-link {
  display: inline-block;
}

.licenses-names-list {
  display: flex;
  align-items: center;
}

.licenses-names-item:not(:first-child)::before {
  content: "•";
  padding-inline: 8px;
}

.licenses-descriptions-description {
  white-space: break-spaces;
  max-block-size: 940px;
  overflow: auto;
  line-height: var(--line-height-spacious);
}

.licenses-descriptions-item {
  display: grid;
  gap: var(--spacing-gap-xl);
}

.code-box {
  border-radius: 4px;
  background-color: var(--color-accent-surface-surface);
  border: 1px solid var(--color-border-surface-on-elevation-1);
  padding: var(--spacing-padding-xl);
  font-family: var(--font-family-code);
  font-size: var(--font-size-body-s);
  display: grid;
  gap: var(--spacing-gap-xxl);
}

.description-list {
  display: grid;
  gap: var(--spacing-gap-m);
  max-inline-size: 400px;
  margin: 0 auto;
}

.show-more-button {
  justify-self: start;
}

.color-neutral {
  color: var(--color-text-neutral-on-disabled);
}

.color-primary {
  color: var(--color-text-primary-default);
}

p {
  --line-height-tight: 1.5;
  --font-weight-regular: var(
    --font-style-regular
  );
}

hr {
  border-block-start: 0;
  border-color: var(--color-border-surface-on-elevation-1);
  inline-size: 100%;
  margin: 0;
}