/* 
  Stylesheet for /tools/translator
  View at: 
    ./../../views/tools/translator/_form.html.haml
    ./../../views/tools/translator/show.html.haml
*/

/*
  center the buttons inside
  the center column
*/
.translator-form .center-block>button {
  margin: 0 auto;
}

/*
  remove padding from
  the center column
*/
.translator-form .center-block {
  padding: 0;
}

/*
  glow inputs red until 
  valid input is present
*/
.translator-form .form-control[required]:invalid:not(:focus):not(:placeholder-shown),
.translator-form .form-control[required]:invalid:focus {
  box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, hsla(0, 75%, 66%, 0.6) 0px 0px 8px;
  border-color: hsl(0, 75%, 66%);
  outline: 0px;
}

/*
  make sure the dropdowns take up
  the entire available width
  of an input grouping
*/
.translator-form .input-group.wide {
  width: 100%;
}

/*
  disallow resizing of textareas
  as it is not compatible with
  fixed sized columns
*/
.translator-form textarea {
  resize: none;
}

/* 
  Allow absurd scaling down to minimum window size
  1rem = 16px at root
 */

@media (max-width: 767px) and (max-height: 25.5rem) {

  /*  
  Set variables on the root to access elsewhere
  */
  :root {
    --width: 100%;
    /* this is just a placeholder until first update */
    --ratio: 0.00105;
    --scale: calc(var(--width) * var(--ratio));
  }

  #content-panel {
    /*  tell browsers to aggro optimize these */
    will-change: transform, width;
    /*  pin to the top left of the parent */
    transform-origin: top left;
    /*  transform scale via our calculated scale;
        translateZ to force GPU compositing */
    transform: scale(calc(var(--scale) * 1.0)) translateZ(0);
    /*  the new element width is the current 
        viewport width divided by the scale */
    width: calc(calc(100 / var(--scale)) * 1vw);
  }

  main,
  body {
    transition: background-color 0.1s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }

}

/*  
  make the background dark when window is super tiny
  */
@media (max-width: 501px) and (max-height: 25.5rem) {

  main,
  body {
    background-color: #262626;
  }

}

/* 
  "Attach" menu row and textareas
  */
.translator-form .form-group .input-group * {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
}

.translator-form.form-lg .form-group {
  margin-bottom: 0;
  height: 100%;
}

.translator-form.form-lg .form-group .input-group {
  height: 100%;
}

.translator-form .form-group-lg textarea {
  /* .form-group-lg sets the height of any children to 46px? */
  height: 100%;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.translator-form .form-group-lg>div {
  /* fixes a % width partial pixel issue */
  display: table;
}

.translator-form .form-group .input-group .form-control~.input-group-btn {
  /* fixes the other partial pixel issue */
  text-align: right;
}


/* 
  enlarge emoji buttons to match 
  */
.translator-form.form-lg button .emoji {
  height: 4.4rem;
}

/*  
  copy of .form-contorl's focus styling
  for hover, + pointer 
  */
.translator-form select:hover {
  box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;
  border-color: rgb(102, 175, 233);
  outline: 0px;
  cursor: pointer;
}
