.hardpoint-group {
  h2.hardpoint-group-label {
    font-size: 20px;
    font-family: "Orbitron", tahoma, sans-serif;
    text-transform: uppercase;
  }

  .hardpoint-group-inner {
    padding: 20px 20px 10px;
  }
}

.hardpoint-type {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba($gray-darker, 0.7);

  &:last-child {
    border-bottom: none;
  }

  .hardpoint-type-label {
    display: flex;
    align-items: center;
    width: 240px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-right: 20px;
    color: darken($text-color, 20%);

    .hardpoint-type-icon {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
  }

  .hardpoint-items {
    flex-grow: 1;
    min-width: 300px;
    max-width: 100%;
  }
}

.hardpoint-type-icon-small {
  width: 25px;
  height: 25px;
  margin-right: 5px;
}

.hardpoint-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;

  &:last-child {
    margin-bottom: 0;
  }

  .hardpoint-item-quantity {
    min-width: 45px;
    padding-right: 10px;
    white-space: nowrap;
    text-align: right;
  }

  .hardpoint-item-slots {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;

    .hardpoint-item-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
  }

  .hardpoint-item-size {
    padding-right: 10px;
    color: $gray-light;
    white-space: nowrap;
  }

  .hardpoint-item-component-manufacturer {
    color: $gray-light;
    font-size: 80%;
  }

  .hardpoint-item-loadout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .hardpoint-item-loadout-quantity {
      padding-right: 10px;
      white-space: nowrap;

      .hardpoint-item-loadout-quantity-icon {
        width: 20px;
      }
    }
  }

  .hardpoint-item-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: $panel-border-width solid $panel-inner-border;
    border-radius: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      position: absolute;
      top: -$panel-border-width;
      right: 14px;
      left: 14px;
      height: $panel-border-width;
      background-color: #444;
      content: "";
    }

    &::after {
      position: absolute;
      right: 14px;
      bottom: -$panel-border-width;
      left: 14px;
      height: $panel-border-width;
      background-color: #444;
      content: "";
    }

    &.has-component {
      // cursor: pointer;
      // transition: border .5s ease;

      // &:hover {
      //   border: 1px solid $gray-lighter;
      // }
    }
  }

  .hardpoint-item-component {
    flex-grow: 1;
    margin-right: 5px;
  }
}

@media (max-width: $desktop-breakpoint) {
  .hardpoint-type {
    .hardpoint-items {
      min-width: 0;
    }
  }
}
