// SC-Image-viewer-style

// ::ng-deep .image-viewer__backdrop {
//   background: rgba(0, 0, 0, 0.9);
// }

@import "@angular/material/theming";
@import "../scss/sc-mixins/sc-breakpoints";
@import "../scss/sc-variables";
// @import "../scss/picture-gallery-theme";

.drop-image-info {
  width: 100%;
  height: calc(100% - #{$content-padding});
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox {
  position: fixed;
  z-index: 1100;
  top: 0;
  bottom: var(--app-height, 100vh);
  right: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in;

  &.show {
    opacity: 1;
    bottom: 0;
    transition: opacity 0.2s ease-out;
  }

  &__wrapper {
    width: 100vw;
    height: var(--app-height, 100vh);
    padding: $content-padding 0 calc(#{$content-padding} - 8px) 0;
    display: grid;
    grid-template-columns: calc(40px + #{$content-padding} * 2) minmax(0, 1fr) calc(40px + #{$content-padding} * 2);
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-items: center;
    grid-template-areas:
      "nav-left      image         nav-right"
      "description   description   description"
      "actions       actions       actions";

    @media screen and (min-width: 960px) {
      grid-template-areas:
        "nav-left   image         nav-right"
        "nav-left   description   nav-right"
        "nav-left   actions       nav-right";
    }
  }

  &__nav-prev {
    grid-area: nav-left;
  }

  &__nav-next {
    grid-area: nav-right;
  }

  &__nav-close {
    grid-area: nav-right;
    align-self: start;
  }

  &__image-wrapper {
    grid-area: image;
    width: 100%;
    height: 100%;
  }

  &__image {
    display: block;
    margin: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &__description {
    grid-area: description;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 80ch;
    padding: $content-padding 16px 0 calc(16px + 56px);

    @media screen and (min-width: 960px) {
      padding: $content-padding 0 0 56px;
    }

    &-text {
      opacity: 0.8;
      margin: 0;
      transition: opacity $hover-transition-duration linear;
      text-align: center;
      cursor: pointer;
      overflow: auto;
      max-height: 280px;
      padding: 1em 12px;
      border: 1px solid;
      border-radius: $card-border-radius;
      // scrollbar-color: #ffffff;
      
      // &::-webkit-scrollbar-thumb {
      //   background-color: #ffffff;
      // }

      .mat-form-field-appearance-outline .mat-form-field-infix {
        padding: 0 !important;
      }
    }

    .lightbox__text-edit-actions {
      flex: 0 0 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 16px;
    }

    &:hover .lightbox__description-text {
      opacity: 1;
      transition: opacity $hover-transition-duration linear;
    }

    &-textarea {
      width: 100%;
    }
  }

  &__actions {
    grid-area: actions;
    padding: 16px calc(#{$content-padding} - 8px) 0
      calc(#{$content-padding} - 8px);
    margin: -8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    button {
      margin: 8px;
    }
  }
}