@import '~scss/variables';

.defaultWrapper {
  padding: 12px;
  border-radius: 4px;
  background-color: #ffffff;
  border: solid 1px $light-color03;

  ul > li {
    display: flex;
    padding: 12px 20px;
    border-radius: 22px;
    background-color: $bg-color;
    border: solid 1px $border-color;

    & + li {
      margin-top: 8px;
    }

    & > span {
      font-family: $font-family-id;
      word-break: break-all;

      &:first-child {
        min-width: 160px;
        margin-right: 80px;
        color: #79879c;
      }

      & > pre {
        font-family: $font-family-id;
        padding: 0;
        background: transparent;
        white-space: pre-wrap;
      }
    }
  }
}

.tlsWrapper {
  padding: 20px;
  border-radius: 4px;
  background-color: $lightest;

  .tlsItem {
    & + .tlsItem {
      margin-top: 20px;
    }

    :global .h6 {
      line-height: 1.43;
      margin-bottom: 8px;
    }

    & > pre {
      padding: 12px;
      border-radius: 4px;
      background-color: #ffffff;
      border: solid 1px $light-color03;
      font-family: $font-family-id;
      white-space: pre-wrap;
    }
  }
}

.imageWrapper {
  ul > li {
    padding: 20px;
    border-radius: 4px;
    background-color: $lightest;

    & + li {
      margin-top: 12px;
    }

    :global .h6 {
      margin-bottom: 8px;
      line-height: 1.43;
      font-family: $font-family-id;

      .icon {
        margin-right: 14px;
      }
    }

    & > ul {
      padding: 12px;
      border-radius: 4px;
      background-color: #ffffff;
      border: solid 1px $light-color03;

      & > li {
        display: flex;
        padding: 12px 20px;
        border-radius: 22px;
        background-color: $bg-color;
        border: solid 1px $border-color;

        & + li {
          margin-top: 8px;
        }

        & > span {
          font-family: $font-family-id;
          word-break: break-all;

          &:first-child {
            min-width: 160px;
            margin-right: 80px;
            color: #79879c;
          }
        }
      }
    }
  }
}
