@import "ui-variables";

.tokenizing-field {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid @border-color-divider;
  min-height: 30px;
  position: relative;

  .header-container, .footer-container {
    background-color: transparent;
    padding:0;
    margin:0;
    border:0;
  }

  .token {
    display: inline-block;
    position: relative;
    padding: 0.5em @spacing-half 0.30em @spacing-half;
    padding-right: 1.5em;
    margin: 0 5px 5px 0;
    border-radius: @border-radius-base;
    font-size: 15px;
    background-color: @background-secondary;

    .action {
      position:absolute;
      padding: 0;
      padding-top: 1px;
      right: 5px;
      border: 0;
      margin: 0;
      background-color: transparent;
      color: @text-color-very-subtle;
      font-size: 10px;
    }
    &:hover {
      background-color: darken(@background-secondary, 5%);
      cursor: pointer;
    }
    &.selected,
    &.dragging {
      background-color: @background-tertiary;
      color: @text-color-inverse;

      .action { color: @text-color-inverse-subtle; }
    }
  }


  .tokenizing-field-label {
    color: @text-color-very-subtle;
    float: left;
    text-transform: capitalize;
    padding-top: 8px;
    display: block;
  }

  .tokenizing-field-input {
    padding-left: 2.1em;

    input {
      display: inline-block;
      width: initial;
      padding: 6px 0 2px 0;
      margin: 0 5px 5px 0;
      border: none;
      min-width: 5em;
      background-color:transparent;
    }
  }
}

body.is-blurred .tokenizing-field .token {
  background-color: @background-secondary;
}