@use '../style/variable' as *;
@use '../style/mixin' as *;

#info {
  @include overflow-auto(y);
  li {
    margin: 10px;
    border: 1px solid var(--border);
    .title,
    .content {
      padding: $padding;
    }
    .title {
      position: relative;
      padding-bottom: 0;
      color: var(--accent);
      .icon-copy {
        position: absolute;
        right: 10px;
        top: 14px;
        color: var(--primary);
        cursor: pointer;
        transition: color $anim-duration;
        &:active {
          color: var(--accent);
        }
      }
    }
    .content {
      margin: 0;
      user-select: text;
      color: var(--foreground);
      font-size: $font-size-s;
      word-break: break-all;
      table {
        width: 100%;
        border-collapse: collapse;
        th,
        td {
          border: 1px solid var(--border);
          padding: 10px;
        }
      }
      * {
        user-select: text;
      }
      a {
        color: var(--link-color);
      }
    }
    .device-key,
    .system-key {
      width: 100px;
    }
  }
}

.safe-area #info {
  @include safe-area(padding-bottom, 10px);
}