// Input style
.ju-input {
  padding: 15px;
  border: 1px solid #ddd;
  border-color: #ddd !important;
  background-color: $white-color;
  height: auto;
  @include borderRadius($small-radius);

  &:focus {
    border-color: $orange-color;
    box-shadow: none;
    outline: none;
  }
  // Placeholder
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: $setting-color;
    opacity: .5;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: $setting-color;
    opacity: .5;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: $setting-color;
    opacity: .5;
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: $setting-color;
    opacity: .5;
  }
  // Input with color picker (minicolors - should include minicolors styles)
  &.minicolors {
    padding-left: 55px;

    + .minicolors-swatch {
      //height: calcRem(44.8px);
      width: calcRem(40px);
      top: calcRem(4px);
      left: calcRem(4px);
      bottom: calcRem(4px);
      border: none;

      .minicolors-swatch-color {
        @include borderRadius($small-radius);
        border: 1px solid #d8d9d4;
      }
    }

    .minicolors-grid {
      .minicolors-picker {
        @include boxSizing(content-box);

        > div {
          @include boxSizing(content-box);
        }
      }
    }
  }
}