/**
 * The default transition, used when the element is visible
 * since the beginning of the animation
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The enter transition, used when the element is not visible on the screen
 * since the beginning of the animation and become visible
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The leave transition, used when the element is visible on the screen
 * since the beginning of the animation and is removed
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The stand transition, used when the element is going to accelerate,
 * like movements from bottom to top
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The out transition, used when the element is going to deaccelerate,
 * like movements from top to bottom
 * ---
 * @access private
 * @type transition
 * @group transition
 */
/**
 * The elevation transition duration
 * ---
 * @access private
 * @type transition
 * @group transition
 */
.md-chips .md-clear {
  background-color: var(--md-outline);
  color: var(--md-primary);
}

.md-chip {
  background-color: var(--md-outline);
}
.md-chip .md-input-action {
  background-color: var(--md-on-surface-medium);
}
.md-chip .md-input-action .md-icon {
  color: var(--md-on-primary);
}
.md-chip.md-primary {
  background-color: var(--md-primary);
  color: var(--md-on-primary);
}
.md-chip.md-accent, .md-chip.md-duplicated {
  background-color: var(--md-secondary);
  color: var(--md-on-secondary);
}

.md-chips.md-field {
  padding-top: 12px;
  flex-wrap: wrap;
}
.md-chips.md-field.md-has-value label {
  top: -6px;
}
.md-chips.md-field .md-chip {
  margin-bottom: 4px;
}
.md-chips.md-field .md-chip:last-of-type {
  margin-right: 8px;
}
.md-chips.md-field .md-input {
  min-width: 128px;
}

.md-chip {
  height: 32px;
  padding: 0 12px;
  display: inline-block;
  cursor: default;
  border-radius: 32px;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: background-color, color, opacity, transform, box-shadow;
  will-change: background-color, color, opacity, transform, box-shadow;
  font-size: 13px;
  line-height: 32px;
  vertical-align: middle;
  white-space: nowrap;
}
.md-chip > .md-state-overlay {
  border-radius: 32px;
}
.md-chip:focus {
  outline: none;
}
.md-chip.md-clickable {
  padding: 0;
  cursor: pointer;
}
.md-chip.md-clickable > .md-ripple {
  padding: 0 12px;
}
.md-chip.md-deletable {
  padding-right: 32px;
  position: relative;
}
.md-chip.md-deletable.md-clickable {
  padding-right: 0;
}
.md-chip.md-deletable.md-clickable > .md-ripple {
  padding-right: 32px;
}
.md-chip.md-disabled {
  cursor: default;
}
.md-chip + .md-chip {
  margin-left: 4px;
}
.md-chip .md-button.md-input-action {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 11;
  transform: translate3d(0, -50%, 0);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 18px;
}
.md-chip .md-button.md-input-action .md-ripple {
  padding: 0;
}
.md-chip .md-button.md-input-action .md-button-content {
  height: 14px;
}
.md-chip .md-button.md-input-action .md-icon {
  font-size: 14px;
  vertical-align: top;
}