@import "node_modules/bootstrap/scss/utilities/borders";
@import "ImgThumbnail";

$panel-images-main-images-size: 210px;
$panel-images-uploaded-images-size: 100px;

.form-images {
  padding: .7rem .7rem .5rem .7rem;
  overflow-x: auto;
  overflow-y: hidden;

  .top-gallery {
    width: fit-content;
    display: flex;

    > .marketing-image,
    > .map-image,
    .img-thumbnail {
      margin-right: 10px; 
    }

    .marketing-image,
    .map-image {
      width: auto;
      height: $panel-images-main-images-size;
      cursor: pointer;
    }

    .map-image {
      width: $panel-images-main-images-size;
    }

    .uploads {
      position: relative;
      height: $panel-images-main-images-size;
      display: flex;
      flex: 1;
      writing-mode: vertical-lr;
      flex-direction: row;
      justify-content: space-between;
      align-content: flex-start;
      flex-wrap: wrap;

      &.no-images {
        height: auto;
      }

      > * {
        writing-mode: horizontal-tb;
      }

      > .btn {
        width: $panel-images-uploaded-images-size;
        height: $panel-images-uploaded-images-size;
        padding: 1.3rem 1.4rem 1.4rem;
        border-radius: .20rem;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .material-icons {
          font-size: 32px;
        }

        .text {
          height: 12px;
          display: flex;
          align-items: center;
        }
      }

      .form-check {
        position: absolute;
        min-width: 135px;
        bottom: -33px;
      }
    }
  }

  .text-muted {
    margin: 0.5rem 0 0;
  }

  .text-warning {
    margin-top: 3px;

    .material-icons {
      font-size: 1rem;
      margin-right: 0.3rem;
      transform: translateY(2px);
    }
  }
}