@import '~@/components/styles/widget.scss';

.resource {
  @include widget;
  flex-direction: column;

  .display {
    align-items: center;
    display: flex;

    .name, .current, .maximum {
      align-items: center;
    }

    .name {
      flex: 1;
      font-weight: bold;
      height: 30px;
    }

    .current, .maximum {
      justify-content: center;
    }
  }

  .rating {
    margin: .25em auto;
  }
}

.list.resource-list > .list-item-wrapper {
  &:hover, &.focus-within {
    border-radius: 5px 0 5px 5px;
  }
}