dev/scss/base/fragment.scss

@charset "utf-8";
@use "choose";
@use "lengths";
@use "icons";

/**
 * Definitions of fragments for vc and query
 * builder.
 */

.vc.fragment,
p.query.fragment {
  @include choose.choose-item;
  position: relative;
  padding:  4pt 6pt !important;
  text-align: left;
  
  border : {
    width:  lengths.$border-size;
    style:  solid;
    radius: lengths.$standard-border-radius;
  }

  margin: {
    left:   lengths.$left-distance;
    top:    .5em;
    bottom: .5em;
    right:  lengths.$right-view-distance;
  }

  &:hover {
    @include choose.choose-hover;
    cursor: pointer;
  }

  // This is the description
  > span:first-of-type {
    font-weight:   bold;
    padding-right: 4pt;
  }

  // Query fragment
  > span:nth-of-type(2) {
    padding-right: 1.2em;
  }
  
  &::after {
	  font-family: 'FontAwesome';
	  content:     icons.$fa-to-query;
    position:    absolute;
    right:       4pt;
    top:         lengths.$border-size;
  }
}