@use "../atoms/assets";
@use "../atoms/colours" as colour;

@mixin equipment($darkmode: false) {
  position: relative;
  height: 32px;
  display: grid;
  grid-template-columns: 32px 24px 1fr 80px;
  grid-template-rows: 1fr;
  padding: 2px 0 0 2px;
  margin: 4px 0 0 4px;
  gap: 8px;
  scale: 0.98;

  @if $darkmode {
    background: rgba(255, 255, 255, 0.1);
  } @else {
    background: assets.$tab-pane-background;
  }


  .icon {
    object-fit: cover;
    max-width: 32px;
    max-height: 32px;
    padding: 0;
  }

  .name, .weight {
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
  }

  input.quantity {
    padding: 0;
    border: unset;
    border-radius: 0;
    height: 24px;
    width: 24px;
    margin: 4px 0;
    text-align: right;
    background: unset;
    box-shadow: unset;

    &:hover {
      text-decoration: underline;
    }
  }

  transition: box-shadow 0.2s, border 0.2s, margin 0.2s, padding 0.2s, scale 0.2s;

  &:hover {
    .name {
      @include colour.highlight;
    }

    @if $darkmode {
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    } @else {
      border: 1px solid #ccc;
      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    }
    scale: 1;
    z-index: 2;
  }

  &.worn {

    .name {
      font-weight: bold;
    }

  }
}