@import "../../../../../responsive";

.ability-box {
  height: 100%;
}

.item-list {
  height: 572px;

  @include height-small {
    height: 642px;
  }
  @include height-medium {
    height: 709px;
  }
  @include height-large {
    height: 787px;
  }
}

.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;
  }
}

.usage-box {
  display: flex;
  align-items: center;
}

.usage {
  background-color: white;
  border: var(--border);
  border-radius: 10px;
  padding: 0.125rem 0.25rem;
}

.used {
  opacity: 0.5;
}

.used {
  opacity: 0.5;
}
