@import "../base/colors";
@import "../base/variables";
@import "../base/mixins";

.h5p-sdk {
  /* Form control */
  .form-control {
    display: block;
    width: 100%;
    padding: 0.7em;
    font-size: $text-body-large;
    border: 0.125em solid $c2;
    box-sizing: border-box;
    font-weight: 600;

    @include placeholder {
      color: #757575;
      font-style: italic;
      font-weight: 400;
    }

    &.form-control-rounded {
      border-radius: 2em !important;
    }

    &:focus {
      border-color: lighten($ac1, 30%);
      box-shadow: inset 0px 0px 0.8em -0.125em rgba(0,0,0,0.4);
      outline: none;

      @include placeholder {
        color: lighten($c6, 30%);
      }
    }
  }

  /* Input Group */
  .input-group {
    position: relative;

    .input-group-addon {
      position: absolute;
      top: 0.5em;
      right: 1em;
    }
  }
}