@import "ui-variables";

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

  .content-container {
    border: 1px solid @border-secondary-bg;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: @border-radius-small;
    background-color: @background-color;
    position: absolute;
  }

  .content-container.empty {
    border: 0;
    box-shadow: none;
  }

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

  .token {
    display: inline-block;
    position: relative;
    color: @text-color;
    padding: 0.4em @spacing-half 0.4em @spacing-half;
    padding-right: 1.5em;
    margin: 2px 5px 3px 0;
    border-radius: @border-radius-base;
    font-size: 15px;
    background-color: @background-secondary;
    max-width: 100%;

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


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

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

    &:hover {
      cursor: text;
    }

    input {
      display: inline-block;
      width: initial;
      vertical-align:top;
      border: none;
      min-width: 0.5em;
      background-color:transparent;

      // NOTE: padding-top and padding-bottom need to match that of
      // `.token`. to ensure they have the same baseline.
      //
      // The padding-left and padding-right must be 0 so we can manually
      // set the width properly to always match the size of the input
      // test.
      padding: 0.4em 0 0.4em 7.5px;
      margin: 2px 5px 3px 0;

      &.noop-input {
        position: absolute;
        min-width: 0;
        padding-left: 0;
        margin-right: 0;
      }
    }

    input:focus {
      box-shadow: none;
    }
  }

  .placeholder {
    color: fade(@text-color, 50%);
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
    left: 1em;
    font-size: 12px;
  }
}

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