@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  height: 100%;
  padding: 12px;
  border-radius: 4px;
  background-color: $lightest;
}

.header {
  display: flex;
  position: relative;

  .text {
    margin-left: 8px;
    .name {
      font-weight: $font-bold;
      font-family: $font-family-id;

      & > div {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    & > p {
      color: #79879c;
    }
  }
}

.content {
  height: calc(100% - 52px);
  margin-top: 12px;
  border-radius: 4px;
  border: solid 1px $light-color03;
  background-color: #ffffff;

  &Header {
    padding: 4px 12px;
    border-bottom: solid 1px $light-color03;
  }

  &Body {
    height: calc(100% - 41px);
    padding: 12px;
    overflow: auto;
  }
}

.properties {
  & > li {
    font-family: $font-family-id;

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

    & > span {
      display: inline-block;
      word-break: break-all;

      &:first-child {
        width: 110px;
        color: #5f708a;
      }

      & + span {
        margin-left: 8px;
      }
    }
  }
}

.close {
  position: absolute;
  @include vertical-center;
  right: 12px;
  padding: 6px;
  border-radius: 4px;
  background-color: $light;
  cursor: pointer;
  transition: all $trans-speed ease-in-out;

  &:hover {
    background-color: $light-color03;
  }
}

.log {
  & + .log {
    margin-top: 8px;
  }
}
