:host {
  @apply flex flex-col relative;
}

.image-wrapper {
  @apply flex flex-row justify-center mt-2;

  .image {
    max-width: 400px;
    max-height: 655px;
  }
}

.thumbnails-wrapper {
  @apply flex flex-row justify-center mt-8;

  button {
    @apply border-none bg-transparent outline-none mr-4;
    opacity: 0.5;
  }

  .thumbnail {
    max-width: 43px;
    max-height: 69px;
  }

  .selected {
    opacity: 1;
  }
}

.controls {
  @apply flex flex-row justify-center mt-8 mr-4;

  button {
    @apply bg-transparent outline-none border-none;

    ui-icon {
      @apply text-ucla-blue;
    }
  }

  span {
    @apply text-ucla-blue mx-2;
  }
}
