.ability-box {
  height: 100%;
}

.item-list {
  // height: calc(100% - 5rem);
  height: 40rem; //TODO: Only mocked to fit
}

.item {
  margin: 15px 10px;
  padding: 10px 10px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;

    .name {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .cost {
      font-weight: 600;
    }
  }

  .charges-box {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
}

.used {
  opacity: 0.5;
}
