@import "./imports.scss";

.document-pages {
  background: $background;
  min-width: 80px;
  overflow-y: auto;
  font-family: $font-family;
  height: 100%;
  border-right: $component-border;

  .document-thumbnail {
    text-align: center;
    padding: 16px 0;
    margin: 0 8px 16px 8px;
    cursor: pointer;

    .image-container {
      display: flex;
      justify-content: center;

      .img-thumbnail {
        border: 1px solid $grey-detail;
        border-radius: 4px;

        &.selected {
          border: 2px solid $primary;
        }

        img {
          border-radius: 4px;
        }
      }
    }

    .number-thumbnail {
      color: $text-lighter;
      font-size: 12px;
      margin-top: 4px;
    }
  }
}