$size: 4;
$picture-max-height: 300px;
$picture-min-height: 90px;

.ui-pictures {
  &__gallery {
    display: flex;
    flex-wrap: wrap;

    h4 {
      width: 100%;
      text-align: center;
    }
  }

  &__picturebox {
    flex-grow: 1;
    margin: 2px;
    height: 250px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    img {
      height: 250px;
      object-fit: cover;
      max-width: 100%;
      min-width: 100%;
      vertical-align: bottom;
      will-change: transform;
    }

    &__span {
      position: relative;
      min-height: 100%;

      & > .btn {
        width: 40px;
        height: 40px;
      }

      & > .top-picture,
      & > .creation {
        opacity: 1;
        position: absolute;
        left: 2%;
        display: flex;
        align-items: center;
        max-width: calc(100% - 60px);
        font-size: 12px;

        & .picture__text {
          border-radius: 50px;
          padding: 3.5px;
          display: inline-flex;
          justify-content: center;
          background-color: rgba(105, 105, 105, 0.5);
          &:empty {
            display: none;
          }
        }
      }

      & > .creation {
        bottom: 2%;

        .creation {
          &__creator {
            border-radius: 50px;
            padding: 3.5px;
            display: inline-flex;
            justify-content: center;
            margin-right: 5px;

            &:empty {
              display: none;
            }
          }
        }
      }

      & > .top-picture {
        top: 2%;
      }

      & > .image-type {
        opacity: 1;
        position: absolute;
        left: 2%;
        bottom: 15%;
        display: flex;
        align-items: center;
        max-width: calc(100% - 60px);
        border-radius: 50px;
        font-size: 12px;
        padding: 3.5px;
      }

      & > .picture-selected {
        opacity: 1;
        position: absolute;
        left: 2%;
        top: 2%;
        padding: 3.5px;
      }

      & > .picture-un-selected {
        opacity: 0;
        position: absolute;
        left: 2%;
        top: 2%;
        padding: 3.5px;
      }

      & > .download-btn {
        opacity: 0;
        position: absolute;
        right: 2%;
        top: 2%;
      }

      & > .rotate-left-btn {
        opacity: 0;
        position: absolute;
        right: 2%;
        top: 30%;
      }

      & > .edit-btn {
        opacity: 0;
        position: absolute;
        right: 2%;
        top: 44%;
      }

      & > .rotate-right-btn {
        opacity: 0;
        position: absolute;
        right: 2%;
        bottom: 30%;
      }

      & > .delete-btn {
        opacity: 0;
        position: absolute;
        right: 2%;
        bottom: 2%;
      }

      &--transparent {
        display: flex;
        justify-content: center;
        position: relative;
        height: 100%;

        & > img {
          position: absolute;
          opacity: 0.2;
          top: 0;
          left: 0;
        }

        &.picture-error {
          display: block;
          padding-top: 20px;
        }
      }
    }

    &:hover {
      span > * {
        opacity: 1;
        transition-property: opacity;
        transition-duration: 0.2s;
      }
    }

    ui-circular-progress {
      align-self: center;
    }
  }
}

#gallery {
  & > h4 {
    grid-column: span ($size * 1.5);
  }

  & > div {
    //Grid Structure
    grid-column: span 1;
    grid-row: span 1;
    max-height: $picture-max-height;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 2px 8px 0 rgba(#000, 0.2),
      0 3px 20px 0 rgba(#000, 0.19);

    & > picture-element,
    & > .picture-element {
      min-height: $picture-min-height;
      max-height: $picture-max-height;

      & span {
        & img {
          max-width: 100%;
          min-height: 50px;
          max-height: $picture-max-height;
          object-fit: cover;
          transition: all ease 1s;
        }
      }
    }
  }

  div,
  h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
}

/*.add-gallery {
  color: #66bb6a !important;
  font-weight: bold;
  margin-bottom: 5px;

  &:hover {
    color: #43a047 !important;
  }
}*/

.icon-file-button {
  line-height: 35px !important;
}
