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

#resources {
  @include overflow-auto(y);
  padding: 10px;
  font-size: 14px;
  .section {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    &.warn {
      border: 1px solid var(--console-warn-border);
      .title {
        background: var(--console-warn-background);
        color: var(--console-warn-foreground);
      }
    }
    &.danger {
      border: 1px solid var(--console-error-border);
      .title {
        background: var(--console-error-background);
        color: var(--console-error-foreground);
      }
    }
    &.local-storage,
    &.session-storage,
    &.cookie {
      border: none;
      .title {
        border: 1px solid var(--border);
        border-bottom: none;
      }
    }
  }
  .title {
    padding: $padding;
    line-height: 18px;
    color: var(--primary);
    background: var(--darker-background);
    @include right-btn();
  }
  .link-list {
    font-size: $font-size-s;
    color: var(--foreground);
    li {
      padding: 10px;
      word-break: break-all;
      a {
        color: var(--link-color) !important;
      }
    }
  }
  .image-list {
    color: var(--foreground);
    font-size: $font-size-s;
    display: flex;
    flex-wrap: wrap;
    padding-left: $padding;
    padding-top: $padding;
    &::after {
      content: '';
      flex-grow: 1000;
    }
    li {
      flex-grow: 1;
      cursor: pointer;
      overflow-y: hidden;
      margin-right: $padding;
      margin-bottom: $padding;
      border: 1px solid var(--border);
      &.image {
        height: 100px;
        font-size: 0;
      }
      img {
        height: 100px;
        min-width: 100%;
        object-fit: cover;
      }
    }
  }
}

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