/*
'uploaded-image' class is for the image. all images will have this.
'ready' means the image has been uploaded or was present on first load (ie. likely uploaded)
'pending' means the image has been selected with "choose file", but not yet uploaded
'no-file' means there is not a pending file to be uploaded
*/

:root {
    /* upload container */
    --upload-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* image default styles*/
    --image-height: 100px;
    --image-width: auto;
    --image-border-radius: 10px;
    --image-left-margin: 10px;
    --image-bottom-margin: 10px;
    --image-transition: all .3s ease-in-out;
    --image-padding-to-border: 5px;

    /* image hover styles */
    --image-transform: scale(2.5);
    --image-transform-origin: left;
    --image-transform-left-margin: 10px;
    --image-transform-bg-color: rgba(255,255,255,1);

    /* image ready styles */
    --image-ready-border-color: #2EE59D;
    --image-ready-border-style: solid;
    --image-ready-border-width: 2px;

    /* image pending styles */
    --image-pending-border-color: rgba(255,0,0,1);
    --image-pending-border-style: solid;
    --image-pending-border-width: 2px;
    --image-pending-opacity: 1;
  
  /* image pending hover styles*/
  	--image-pending-hover-opacity: 1;

    /* upload button base styles */
    --button-width: 90px;
    --button-height: 30px;
    --button-text-transform: uppercase;
    --button-font-weight: 700;
    --button-font-color: rgba(0,0,0,.6); /*#313133*/
    --button-bg-color: gray;
    --button-border: none;
    --button-border-radius: 1000px;
    --button-transition: all 0.3s ease-in-out 0s;
    --button-outline: none;
    --button-position: relative;
    --button-top-position: 50%;
    --button-bottom-position: 50%;
    --button-margin-left: auto;
    --button-margin-right: 10px;

    /* upload button while upload is pending*/
    --button-pending-width: 90px;
    --button-pending-height: 30px;
    --button-pending-border-color: rgba(255,0,0,.9);
    --button-pending-border-style: solid;
    --button-pending-border-width: 2px;
    --button-pending-position: absolute;
    --button-pending-shadow: 2px 2px 24px rgba(255,0,0,0.5);
    --button-pending-top-position: 50%;
    --button-pending-left-position: 50%;
    --button-pending-transform: translate(-50%, -50%);
    --button-pending-animation: ring 1.75s infinite;
    --button-pending-bg-color: #2EE59D;
    --btn-pending-hover-font-color: rgba(0,0,0,.6);

    /* upload button on hover while upload is pending */
    --btn-pending-hover-width: 90px;
    --btn-pending-hover-height: 30px;
    --btn-pending-hover-border-width:  2px;
    --btn-pending-hover-border-color:  darkgray;
    --btn-pending-hover-border-style:  solid;
    --btn-pending-hover-shadow:  0px 10px 15px 2px rgba(0, 0, 0, 0.3);
    --btn-pending-hover-position: absolute;
    --btn-pending-hover-top: 50%;
    --btn-pending-hover-left: 50%;
    --btn-pending-hover-transform: translate(-50%, -50%);
    --btn-pending-hover-font-color: rgba(0,0,0,.8);
    --btn-pending-hover-move: translateY(-6px);
}

/* default image styles */
.uploaded-image {
  height: var(--image-height);
  width: var(--image-width);
  border-radius: var(--image-border-radius);
  margin-left: var(--image-left-margin);
  margin-right: 100%;
  padding: var(--image-padding-to-border);
  align-content: left;
  margin-bottom: var(--image-bottom-margin);
  z-index: 9999;
  position: relative;
  transition: var(--image-transition);
  background-color: var(--image-transform-bg-color);
}

/* default images styles on hover */
.uploaded-image:hover,
.uploaded-image.ready:hover,
.uploaded-image.pending:hover {
  transform: var(--image-transform);
  transform-origin: var(--image-transform-origin);
  margin-left: var(--image-transform-left-margin);
}

/* image style when 'ready' */
.uploaded-image.ready {
  border: var(--image-ready-border-color) var(--image-ready-border-style) var(--image-ready-border-width);
}

/* image style when 'pending' */
.uploaded-image.pending {
    border: var(--image-pending-border-color) var(--image-pending-border-style) var(--image-pending-border-width);
    opacity: var(--image-pending-opacity);
    background-color: rgba(255,255,255,1);
}
/* image style when pending on hover */
.uploaded-image.pending:hover {
  background-color: rgba(255,255,255,1);
  opacity: var(--image-pending-hover-opacity);
}

/* style upload buttons container */
.upload-container {
  font-family: var(--upload-font);
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: left;
  padding-left: 10px;
}

/* upload button default style */
.upload-button {
  width: var(--button-width);
  height: var(--button-height);
  text-transform: var(--button-text-transform);
  font-weight: var(--button-font-weight);
  color: var(--button-font-color);
  background-color: var(--button-bg-color);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  transition: var(--button-transition);
  outline: var(--button-outline);
  position: var(--button-position);
  top: var(--button-top-position);
  bottom: var(--button-bottom-position);
  margin-left: var(--button-margin-left);
  margin-right: var(--button-margin-right);
  }

/* upload button on hover while upload is pending */
.upload-button::before {
  content: '';
  border-radius: var(--button-border-radius);
  width: calc(var(--btn-pending-hover-width) + var(--btn-pending-hover-border-width));
  height: var(--btn-pending-hover-height);
  border: var(--btn-pending-hover-border-width) var(--btn-pending-hover-border-color) var(--btn-pending-hover-border-style);
  box-shadow: var(--btn-pending-hover-shadow);
  position:  var(--btn-pending-hover-position) !important;
  top: var(--btn-pending-hover-top) !important;
  left: var(--btn-pending-hover-left) !important;
  transform: var(--btn-pending-hover-transform) !important;
  opacity: 0;
  transition: var(--button-transition) !important;
}

/* upload button on hover while upload is pending */
.upload-button.pending:hover, .upload-button.pending:focus {
  color: var(--btn-pending-hover-font-color);
  transform: var(--btn-pending-hover-move);
}

.upload-button.pending:hover::before, .upload-button.pending:focus::before {
  opacity: 1;
}

/* upload button while upload is pending*/
.upload-button.pending::after {
  content: '';
  border-radius: var(--button-border-radius);
  width: calc(var(--button-pending-width) + var(--button-pending-border-width));
  height: calc(var(--button-pending-height) + var(--button-pending-border-width));
  border: var(--button-pending-border-width) var(--button-pending-border-style) var(--button-pending-border-color);
  position: var(--button-pending-position) !important;
  box-shadow: var(--button-pending-shadow);
  z-index: 1;
  top: var(--button-pending-top-position) !important;
  left: var(--button-pending-left-position) !important;
  transform: var(--button-pending-transform) !important;
  animation: var(--button-pending-animation);
  cursor: pointer;
  color: var(--btn-pending-font-color);
}

/* upload button while upload is pending*/
.upload-button.pending {
  background: var(--button-pending-bg-color);
}

.upload-button.no-file {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed !important;
  pointer-events: none;
}

.upload-button:hover::after, .upload-button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.1;
  }
}

/* image help messages */
.img-messages {
    margin-top: 10px;
    text-align: center;
    display: table;
    
  }
  .img-messages .inactive {
    visibility: hidden;
  }
  
  .img-messages .active,
  .img-messages .inactive {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .upload-msg {
    display: table-cell;
    color: red;
    border: 1px solid red;
    background-color: white;
  }
  
  .save-msg {
    display: table-cell;
    color: red;
    border: 1px solid red;
    background-color: white;
  }