@import '../../../core/src/style/variables';
@import '../../../core/src/style/mixins';

.box-spacer {
  width: 150px;
  height: auto;
  display: table;
  float: left;
  margin-top: 10px;
  position: relative;

  &--dash {
    display: table-cell;
    width: 60px;
    color: $grey;
    > span {
      padding-top: 3px;
      > hr {
        border: 1px solid $grey;
        margin: 7px 0;
      }
    }
    @media (max-width: $phablet-breakpoint) {
      width: 45%;
    }
  }
  @media (max-width: $desktop-breakpoint) {
    width: 100%;
  }

  &--text {
    display: table-cell;
    text-transform: uppercase;
    font-weight: bold;
    color: $middarkergrey;
    padding: 0px 5px 0px 5px;
    position: absolute;
    top: -2px;
  }
  @media (max-width: $phablet-breakpoint) {
    width: 100%;
    margin-bottom: 0.5em;
  }
}

.partNumber-box {
  height: 260px;
  background-color: $white;
  display: table;
  position: relative;
  @include col-width($col-narrow, 10px);

  @media (min-width: $wide-breakpoint) {
    @include col-width($col-wide, 10px);
  }
  @media (max-width: $phablet-breakpoint) {
    width: 100%;
  }
  @media (max-width: $desktop-breakpoint) {
    width: 100%;
  }

  &--header {
    padding: 0.5em;
    width: 100%;
    background-color: $grey;
    text-align: center;

    span {
      text-transform: uppercase;
      font-weight: bold;
      color: $middarkergrey;
    }
  }

  &--content {
    border: 1px solid $grey;
    min-height: 175px;
    max-height: 175px;
    padding: 10px;
    color: $middarkergrey;
    > textarea {
      resize: none;
      height: 155px;
      width: 100%;
      outline: 0;
      border: 0;
      font-size: 1.4rem;
    }
  }

  .partNumber-button {
    width: 100%;
    margin-top: 27px;
    > button {
      width: 100%;
    }
  }
  .partNumber-limit {
    margin-top: 10px;
    text-align: justify;
    font-size: 1.4rem;
    color: #a34345;
  }
}