// If compiled with BS4 this will produce responsive font sizes
@mixin font-size-shim($size) {
  @if mixin-exists("font-size") {
    @include font-size($size);
  } @else {
    font-size: $size;
  }
}

// The hard-coded colors here only "win" when bslib isn't used
.value-box {
  border-radius: 2px;
  position: relative;
  display: block;
  margin-right: 8px;
  margin-bottom: 8px;
  color: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  > .inner {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .value {
    @include font-size-shim(38px);
    font-weight: bold;
    margin: 0 0 3px 0;
    white-space: nowrap;
    padding: 0;
  }
  .caption {
    @include font-size-shim(15px);
     > small {
      display: block;
      @include font-size-shim(13px);
      margin-top: 5px;
    }
  }
  .icon i {
    position: absolute;
    top: 15px;
    right: 15px;
    @include font-size-shim(80px);
    color: rgba(0, 0, 0, 0.15);
  }
  &.linked-value:hover {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  }
}

.linked-value:hover {
  cursor: pointer;
}
