.quick-add-wrapper {
  min-width: #{600 / $base-font-size}rem;
  overflow-y: scroll;
}

.quick-add {
  width: auto;
  padding: #{24 / $base-font-size}rem;
}

.quick-add__item {
  display: flex;
  align-items: center;
  height: #{64 / $base-font-size}rem;
  padding-right: #{24 / $base-font-size}rem;

  button, a {
    @include themify() {
      color: getThemifyVariable('primary-text-color');
    }
  }
}

.quick-add__item:nth-child(odd) {
  @include themify() {
    background: getThemifyVariable('table-row-stripe-color');
  }
}

.quick-add__item-toggle {
  display: flex;
  align-items: center;
}

.quick-add__item-name {
  flex: 1;
}

.quick-add__icon {
  display: inline-block;
  margin-right:#{15 / $base-font-size}rem;
  width:#{35 / $base-font-size}rem;
  height:#{35 / $base-font-size}rem;
  @include icon();
  @include themify() {
    // icon graphic
    path {
      fill: getThemifyVariable('table-button-color');
    }

    // icon background circle
    path:first-child {
      fill: getThemifyVariable('table-button-background-color');
    }

    & svg {
      width:#{35 / $base-font-size}rem;
      height:#{35 / $base-font-size}rem;
    }
  }
}

.quick-add__icon > * {
  display: none;
}

.quick-add__in-icon {
  display: inline-block;
}

.quick-add__icon--in-collection .quick-add__in-icon {
  @include themify() {
    // icon graphic
    & path {
      fill: getThemifyVariable('table-button-active-color');
    }

    // icon background circle
    & path:first-child {
      fill: getThemifyVariable('table-button-background-active-color');
    }
  }
}

.quick-add__add-icon {
  transform: rotate(45deg);
}

.quick-add__item:hover,
.quick-add__item-toggle:hover,
.quick-add__item-toggle:focus {
  cursor: pointer;
  @include themify() {
    & .quick-add__icon path {
      fill: getThemifyVariable('table-button-hover-color');
    }

    & .quick-add__icon path:first-child {
      fill: getThemifyVariable('table-button-background-hover-color');
    }
  }

  & .quick-add__in-icon {
    display: none;
  }

  & .quick-add__icon--in-collection {
    .quick-add__remove-icon {
      display: inline-block;
    }

    .quick-add__add-icon {
      display: none;
    }
  }

  & .quick-add__icon--not-in-collection {
    .quick-add__add-icon {
      display: inline-block;
    }

    .quick-add__remove-icon {
      display: none;
    }
  }
}