@use "variables.scss";

#document-pages {
  background: variables.$background;
  min-width: 80px;
  overflow-y: auto;
  font-family: variables.$font-family;
  height: 100%;
  border-right: variables.$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 variables.$grey-detail;
        border-radius: 4px;

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

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

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