.selectable-card {
  box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
  display: flex;
  justify-content: space-between;
  padding: $spacing-l 0 $spacing-l $spacing-l;
  line-height: 0;

  &.no-flex {
    padding: $spacing-l;
    display: initial;
    line-height: initial;

    .title-number {
      padding-top: $spacing-s;
    }

    .search-label {
      margin-bottom: -$spacing-xs;
    }
  }

  &:hover {
    box-shadow: 0 0 0 1px $grey-light, $box-shadow-middle;
  }

  > a {
    text-decoration: none;
  }

  .button {
    &:disabled {
      border-color: $vault-gray-300;
    }
  }

  .card-details {
    grid-column-start: 2;
    grid-row-start: 3;
    align-self: center;
    justify-self: right;
    padding-right: $spacing-l;
  }

  .change-metric {
    justify-self: right;
    padding-right: $spacing-l;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;

    .hs-icon {
      color: $grey-light;
      align-self: center;
      justify-self: right;
    }

    .amount-change {
      align-self: center;
      justify-self: center;

      font-weight: 500;
    }
    .item-c {
      grid-column: 1 / span 2;
      align-self: start;
      justify-self: end;

      font-weight: $font-weight-semibold;
      white-space: nowrap;

      @include until($mobile) {
        overflow: hidden;
      }
    }
  }

  .title-number {
    color: $black;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.33;
  }

  .vlt-table {
    max-height: 200px;
    overflow-y: auto;
  }
}

.selectable-card.is-rounded {
  border-radius: $radius;
}

.selectable-card.has-border-danger {
  box-shadow: none;
}

.change-metric-icon.is-decrease {
  transform: rotate(135deg);
}

.change-metric-icon.is-increase {
  transform: rotate(45deg);
}