@import './base.less';

@tag-font-size: @base-font-size - 0.15;

.@{css-prefix}.tag {
  cursor: pointer;
  display: inline-block;
  line-height: 1em;
  font-size: @tag-font-size;
  vertical-align: baseline;
  background-color: #E8E8E8;
  background-image: none;
  padding: 0.5833em 0.833em;
  color: rgba(0, 0, 0, 0.6);
  text-transform: none;
  font-weight: bold;
  border: 0 solid transparent;
  border-radius: @border-radius;
  .transition(background 0.1s ease);
  .user-select(none);
  margin: 0em 0.5em 0.5em 0em;

  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }

  i {
    opacity: 0.8;
    margin-left: 0.5em;
  }

  &:not(.attached):hover {
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.15);
  }

  &.circle {
    border-radius: 50em;
  }

  &.floating {
    position: absolute;
    top: -1em;
    left: 100%;
    margin: 0 0 0 -1em!important;
    padding: .4em .5em;
  }

  &.attached {
    position: absolute;
    padding: @input-padding;
    font-size: 1em;
    border-radius: 0;
    margin: 0;
    border: 1px solid transparent;
    z-index: 10;

    &.top, &.bottom {
      width: 100%;
      left: 0;
      &.left, &.right {
        width: auto;
      }
      &.right {
        right: 0;
        left: auto;
      }
    }

    &.top {
      top: 0;
    }
    &.bottom {
      bottom: 0;
    }
  }

  .colors;

  &.positive {
    .type-positive;
  }

  &.negative {
    .type-negative;
  }

  &.primary {
    .type-primary;
  }

  // size
  .font-sizes;
}

.@{css-prefix}.tags {
  input {
    font-size: @tag-font-size;
    outline: none;
    border: 1px solid rgba(34, 36, 38, 0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    padding: 0.3633em 0.633em;
    width: 100px;
    border-radius: @border-radius;
  }
  input:focus {
    border-color: #85B7D9;
    box-shadow: 0 0 0 2px rgba(16,142,233,.2);
  }

}