@charset "utf-8";
@import "../util";

/**
 * Styles for tags.
 */

// Currently not used

$tagcolor: rgba(0,0,0,0.5);

.tagger {
  display:         table;
  border-collapse: collapse;
  width:           100%;
  font-size:       100%;

  // The tag list
  > div  {
    display:     table-cell;
    font-size:   inherit;
    white-space: nowrap;
    width:       0;

    // The tag
    > span {
      display:          inline-block;
      font-size:        80%;
      white-space:      nowrap;
      background-color: $dark-orange;
      padding:          2px 6px;
      color:            $tagcolor;
      text-shadow:      $light-shadow;
      margin-right:     2px;
      box-shadow:       $choose-box-shadow;
      cursor:           pointer;

      border: {
	      width:  $border-size;
	      style:  solid;
	      color:  rgba(0,0,0,0.3);
	      radius: $standard-border-radius;
      }

      > span {
	      cursor: crosshair;

        &::after {
          @include icon-font;
	        font-size:      70%;
	        vertical-align: top;
	        padding-left:   3px;
	        color:          $tagcolor;
	        text-shadow:    none;
	        content:        $fa-close;
	      }
      }
    }
  }

  // The tag input field
  input[type=text] {
    display:          table-cell;
    width:            100%;
    border:           none;
    background-color: $light-grey;
    font-size:        inherit;
  }
}


