@import "./mixin.less";

.resource-wrapper {
  @apply w-full flex flex-col justify-start items-start;

  > .images-wrapper {
    @apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
    .pretty-scroll-bar(0, 2px);

    > .memo-img {
      @apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
      .hide-scroll-bar();

      > img {
        @apply w-auto max-h-40 rounded-lg;
      }
    }
  }

  > .other-resource-wrapper {
    @apply w-full flex flex-row justify-start flex-wrap;

    > .other-resource-container {
      @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;

      > .icon-img {
        @apply w-4 h-auto mr-1 text-gray-500;
      }

      > .name-text {
        @apply text-gray-500 text-sm max-w-xs truncate font-mono;
      }
    }
  }
}