image-row {
  display: inline-grid;
  width: 100%;

  .image-row-container {
    overflow: hidden;
    position: relative;
    width: 100%;

    .image-row {
      position: relative;
      width: fit-content;
      display: flex;
      align-items: center;
      background-color: black;

      &.animated {
        transition: transform 0.5s ease-in-out;
      }

      .image-container {
        position: relative;

        &.selected-image {
          background-color: #37588e;

          img {
            opacity: 0.5;
          }
        }

        img {
          max-width: 600px;
          user-select: none;
          -webkit-user-drag: none;
        }

        .image-placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          background-color: #d9dee4;
        }

        img,
        .image-placeholder {
          transition: filter 0.25s ease-in-out;

          &.highlightOnHover:hover {
            filter: brightness(92%);
          }
        }

        .resource-info {
          position: absolute;
          bottom: 3px;
          left: 50%;
          transform: translateX(-50%);
          max-width: calc(100% - 60px);
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
          background-color: #f8f9fad4;
          opacity: 0;
          transition: opacity 0.25s ease-in-out;
          user-select: none;
        }

        &:hover {
          .resource-info {
            opacity: 1;
          }
        }
      }
    }

    .next-page-button,
    .previous-page-button {
      height: 175px;
      position: absolute;
      width: 30px;
      background-color: #545454;
      opacity: 0;
      transition: background-color 0.15s ease-in-out, opacity 0.25s ease-in-out;
      z-index: 1;

      &:hover {
        background-color: lighten(#545454, 10%);
      }

      &:active {
        background-color: darken(#545454, 10%);
      }

      .mdi {
        position: relative;
        top: 76px;
        left: 7px;
        color: white;
      }
    }

    .next-page-button {
      top: 0;
      right: 0;
    }

    &:hover {
      .next-page-button,
      .previous-page-button {
        opacity: 0.8;
      }
    }
  }
}