@import "clay";

.component-input {

  .section & {
    padding: 0;
  }

  label {
    display: block;
  }

  .label {
    padding-bottom: $item-spacing-v;
  }

  .input {
    position: relative;
    min-width: 100%;
    margin-top: $item-spacing-v;
    margin-left: 0;
  }

  input {
    display:block;
    width: 100%;
    background: $color-gray-2;
    border-radius: $border-radius;
    padding: $item-spacing-v / 2 $item-spacing-h / 2;
    border: none;
    vertical-align: baseline;
    color: $color-white;
    font-size: inherit;
    appearance: none;
    min-height: $item-spacing-v + ($base-height + 0rem) ;

    @include placeholder {
      color: $color-gray-8;
    }

    &:focus {
      @include placeholder {
        color: $color-gray-6;
      }
      border: none;
      box-shadow: none ;
    }
  }
}