@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);

@border: #ddd;
@black: #000;
@white: #fff;
@red: #e74c3c;
@error: fade(@red, 70%);
@blue: #3498db;
@main: #19BC9C;
@container: #f9f9f9;

.transform(@string) {
  -webkit-transform: @string;
  -khtml-transform: @string;
  -moz-transform: @string;
  -ms-transform: @string;
  -o-transform: @string;
}

.transform-origin(@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -khtml-transform-origin: @x @y;
  -moz-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  -o-transform-origin: @x @y;
}

.transition(@transition) {
  -webkit-transition: @transition;  
  -khtml-transition: @transition;  
  -moz-transition: @transition;
  -ms-transition: @transition; 
  -o-transition: @transition;  
}

.transition-duration(@duration:0) {
  -webkit-transition-duration: @duration;  
  -khtml-transition-duration: @duration;  
  -moz-transition-duration: @duration;
  -ms-transition-duration: @duration; 
  -o-transition-duration: @duration;  
}

.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

@radius: 4px;

* { box-sizing: border-box; }
.color{ color: @main !important; }

html, body{
  width: 100%; height: 100%;
  margin: 0;
  font-family: 'Ubuntu Condensed', sans-serif;
  background-color: @white;
}

h1{
  text-align: center;
  margin-bottom: 32px;
}

div.container{
  display: block;
  width: 50%;
  margin: 32px auto;
  padding: 16px 32px;
  background-color: @white;
  box-shadow: 2px 2px 8px fade(@black, 10%);
}

div.inputTags-list{
  display: inline-block;
  width: 100%;
  padding: 6px;
  border: 1px solid fade(@main, 35%);
  background-color: @container;
  box-shadow: 1px 2px 2px fade(@border, 20%);
  .border-radius(@radius);
  
  span.inputTags-item{
    position: relative;
    display: inline-block;
    margin: 2px; padding: 3px 22px 4px 8px;
    background-color: @main;
    text-align: center;
    color: @white;
    opacity: 1;
    .border-radius(3px);

    &.is-edit{ display: none; }
    &.is-hidden{ display: none !important; }
    &.is-exists{ background-color: @error; }
    
    span.value{ cursor: pointer; }
    
    i{
      position: absolute;
      top: 50%; right: 6px;
      font-size: 20px;
      cursor: pointer;
      z-index: 10;
      font-weight: 400;
      font-family: sans-serif;
      line-height: 1;
      font-style: normal;
      .transition(color .2s);
      .transform(translateY(-50%));
      
      &:hover{ color: @red; }
    }
  }
  input.inputTags-field{
    border: none;
    margin-left: 4px;
    background-color: transparent;
    
    &:focus, &:active{ outline: none; }
    &.is-edit{
      margin: 0 2px;
      padding: 4px 8px 3px 8px;
      border: 1px dashed darken(@border, 10%);
      .border-radius(@radius);
    }
  }
  
  ul.inputTags-autocomplete-list{
    position: absolute;
    max-height: 192px;
    margin: 0; padding: 0;
    list-style-type: none;
    background-color: @white;
    border: 1px solid @border;
    overflow-y: auto;
    z-index: 100;
    opacity: 0;
    .border-radius(@radius);
    .transform(scaleY(0));
    .transform-origin(50%, 0);
    .transition-duration(.2s);
    
    &.is-active{
      opacity: 1;
      .transform(scaleY(1));
    }
    
    li{
      height: 32px; line-height: 32px;
      padding: 0 16px;
      cursor: pointer;
      border-bottom: 1px solid @border;
      .transition-duration(.3s);
      .transition-duration(.2s);
      
      &:last-child{ border: none; }
      
      &:hover{
        background-color: @main;
        color: @white;
      }
      
      &.is-disabled{
        cursor: default;
        background-color: lighten(@border, 10%);
        color: initial;
      }
    }
  }
}

p.inputTags-error{
  position: relative;
  margin: 0; padding: 0.5em 1em;
  color: @white;
  background-color: @error;
  cursor: pointer;
  .border-radius(@radius);
  
  &:first-of-type{ margin-top: 8px; }
  &:after{
    position: absolute;
    content: "\000D7";
    top: 50%; right: 0.5em;
    .transform(translateY(-50%));
    font-size: 28px;
  }
}