button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  --wrapper-copacity: 0;
  --wrapper-min-inline-size: 700px;
  --wrapper-max-inline-size: 1040px;
  --wrapper-block-size: 640px;
  transition: var(--timing-regular) opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--spacing-padding-xl);
  overflow: auto;
}

.wrapper {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--wrapper-block-size);
  block-size: var(--wrapper-block-size);
  max-inline-size: var(--wrapper-max-inline-size);
  background-color: var(--color-accent-surface-elevation-1);
  border-radius: 12px;
  overflow: auto;
  transform: translateY(4px);
}

.side-inline-start {
  background-size: cover;
}

.side-inline-end {
  position: relative;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  padding-block: 64px;
  padding-inline: 80px;
  transition: var(--timing-slow) grid-template-rows;
  overflow: auto;
}

.close-button {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
}

.header {
  display: grid;
  gap: var(--spacing-gap-xl);
  margin-block-end: 92px;
}

.header__logo__close-button {
  display: flex;
  justify-content: space-between;
}

.title {
  color: var(--color-text-neutral-strawberry);
  letter-spacing: 0.02em;
}

.next-version {
  color: var(--color-text-neutral-strawberry);
}

.header__description {
  color: var(--color-text-neutral-disabled);
  line-height: 1.45 !important;
}

.main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-l);
  overflow: auto;
}

.log__container {
  --logVisibleLines: 7;
  --logFontSize: var(
    --font-size-body-s
  );
  --logLineHeight: var(
    --line-height-relaxed
  );
  --logGap: 4px;
  --logContainerBlockSize: calc(
    var(--logFontSize) * var(--logLineHeight) * var(--logVisibleLines) +
      calc(var(--logGap) * (var(--logVisibleLines) - 1))
  );
  block-size: var(--logContainerBlockSize);
  font-family: var(--font-family-code);
  color: var(--color-text-neutral-disabled);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--logGap);
  overflow: hidden;
}
.log__container:hover {
  overflow: auto;
}
.log__container > p {
  font-family: inherit;
}

.log__message {
  opacity: 0;
  transition: var(--timing-regular) opacity;
  animation: fadeInLogMessage 0.45s ease-out forwards;
}
.log__message--error {
  color: var(--color-text-error-default);
}

.footer {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--spacing-gap-l);
  margin-block-start: 24px;
}

.error-message {
  color: var(--color-text-error-default);
  margin-block-start: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

.status--processing {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--spacing-gap-xs);
}

@keyframes fadeInLogMessage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}