@import 'variables';

.github-PrPaneItem {
  padding: @component-padding * 3;
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 1.25em;
  line-height: 1.5;
  background-color: @base-background-color;

  * {
    user-select: all;
    -webkit-user-select: all;
  }

  &-container {
    max-width: 48em;
    margin: 0 auto;
  }

  // Badge and link ------------------------
  .issueish-badge-and-link {
    display: flex;
    align-items: center;
    margin-bottom: @component-padding * 2;
  }
  .issueish-badge {
    align-self: flex-start;
    flex-shrink: 0;
    margin-right: @component-padding;
    font-weight: bold;
    text-transform: capitalize;
    border-radius: @component-border-radius;

    &.open {
      color: contrast(@gh-background-color-green, black, white, 50%);
      background-color: @gh-background-color-green;
    }

    &.closed {
      color: contrast(@gh-background-color-red, black, white, 50%);
      background-color: @gh-background-color-red;
    }

    &.merged {
      color: contrast(@gh-background-color-purple, black, white, 50%);
      background-color: @gh-background-color-purple;
    }
  }

  .issueish-link a {
    color: @text-color-subtle;
  }


  // Avatar and title ------------------------

  .issueish-avatar-and-title {
    display: flex;
    align-items: center;
    margin-bottom: @component-padding * 2;
    padding-bottom: @component-padding;
    border-bottom: 1px solid @base-border-color;
  }

  .author-avatar-link {
    margin-right: @component-padding;
    align-self: flex-start;
  }

  .author-avatar {
    max-height: 32px;
    border-radius: @component-border-radius;
  }

  .issueish-title {
    margin: 0;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.3;
    color: @text-color-highlight;
  }


  // Body ------------------------

  .issueish-body {
    padding-top: @component-padding;
    border-top: 1px solid @base-border-color;

    & > *:first-child {
      margin-top: 0;
    }
  }

  .github-DotComMarkdownHtml {
    a {
      color: @text-color-info;
    }

    p {
      line-height: 1.5;
    }

    hr {
      margin-top: 5px;
      margin-bottom: 5px;
      border-top: 1px solid @text-color;
      width: 100%
    }

    ul {
      margin-left: -10px;
    }

    ol {
      margin-left: -20px;
    }

    li {
      font-size: .9em;
      padding-top: .1em;
      padding-bottom: .1em;

      li {
        font-size: 1em;
      }
    }

    pre > code {
      white-space: pre;
    }
  }


  // Reactions ------------------------

  .reactions {
    width: fit-content;
    padding-top: @component-padding;
    .reaction-group {
      margin-right: @component-padding;
      padding: @component-padding;
      border: 1px solid @base-border-color;
      border-radius: @component-border-radius;
    }
    &:empty {
      all: unset;
    }
  }


  // Elements ------------------------

  blockquote {
    font-size: inherit;
    padding-top: 0;
    padding-left: @component-padding;
    padding-bottom: 0;
    color: @text-color-subtle;
    border-left: 2px solid @text-color-subtle;
  }
}
