@use 'config/colors';
@use 'config/fonts';
@use 'functions/color';
@use 'mixins/flex';
@use 'mixins/font';
@use 'mixins/position';
@use 'mixins/spacing';

.container {
  @include position.absolute-fill;
  @include font.apply(fonts.$mono);
  font-size: 10px;
  color: colors.$red;
  // color: colors.$green;
  // background-color: color.alpha(colors.$red, 0.15);
  // background-color: #F0D8D9;
  background-color: color.tint(colors.$green, 85%);
  overflow: hidden;

  &, *, *::before, *::after {
    box-sizing: border-box;
  }

  p {
    margin-block-start: 0;
    margin-block-end: 0;
  }
}

.contentContainer {
  @include position.absolute-fill;
  overflow-x: hidden;
  z-index: 1;
}

.content {
  @include spacing.padding($top: 20px, $right: 15px, $bottom: 25px, $left: 15px);
}

.header {
  @include flex.column-center;
  @include spacing.margin($bottom: 15px);
  @include font.apply(fonts.$primary);
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.icon {
  width: 45px;
  min-width: 45px;
  height: 45px;
  min-height: 45px;
  @include spacing.margin($bottom: 5px);
}

.title {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

.battleInfo {
  @include spacing.margin($top: 0.25em);
  text-align: center;

  .format {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .playerName {
    font-weight: 500;
  }

  .versus {
    display: inline-block;
    @include spacing.padding($x: 0.3em);
    opacity: 0.72;
  }
}

.subtitle {
  @include spacing.margin($top: 1em);
  font-weight: 600;
  font-size: 11px;
}

.description {
  @include spacing.margin($top: 1em);
  font-size: 10px;
}

.errorStackButton {
  position: relative;
  border-radius: 12px;
  box-shadow: (
    0 0 1px color.alpha(colors.$red, 0.64),
    0 0 12px color.alpha(colors.$red, 0.32),
  );
  touch-action: none;

  .copiedBadge {
    @include position.absolute($top: -8px, $left: 50%);
  }
}

.errorStackContainer {
  width: 100%;
  font-size: 9px;
  overflow-y: hidden;

  &.reportContents {
    @include spacing.margin($y: 16px);
  }
}

.errorStack {
  @include spacing.padding($x: 12px, $y: 10px);
  white-space: pre;
}

.dehydratedState {
  @include spacing.padding($x: 12px, $y: 10px);
  word-break: break-all;
  overflow: hidden;
}

.description {
  @include spacing.margin($top: 16px);
  @include spacing.padding($x: 12px);
  @include font.apply(fonts.$primary);
  text-align: justify;
  user-select: none;

  p:not(:last-child) {
    @include spacing.margin($bottom: 1em);
  }

  strong {
    font-weight: 600;
    font-size: 11px;
  }
}

.downloadContainer {
  @include flex.row-center;
  @include spacing.margin($y: 24px);
  // min-height: 325px;
}

button.downloadButton {
  font-weight: 500;
  background: linear-gradient(65deg, colors.$red 2%, colors.$pink 98%) 0 0 / 100% 100%;
  background-clip: text;

  &.overrideShadow {
    box-shadow: (
      0 0 1px color.alpha(colors.$red, 0.8),
      0 0 8px color.alpha(colors.$pink, 0.32),
    );
  }

  &::before {
    background: linear-gradient(65deg, colors.$red 2%, colors.$pink 98%) 0 0 / 100% 100%;
  }

  span.verbLabel {
    display: inline-block;
    @include spacing.margin($right: 0.6em);
    font-weight: 700;
  }
}

button.showButton {
  @include font.apply(fonts.$primary);
  font-size: inherit;
}
