/* The Stylable sheet wrote a bare rowsMargin, invalid CSS that never applied, so no margin-top here. */
.editable-selector {
  &__row {
    display: flex;
    align-items: center;
    height: 36px;
  }

  @media (hover: hover) {
    &__row:hover &__option-menu {
      visibility: visible;
    }
  }

  /* `__item` lands on a `Selector` root, whose own `--size-*` rules set the
     padding; the doubled slot class outranks them (ported from the Stylable
     `.row .editableSelectorItem.editableSelectorItem`) */
  &__row &__item#{&}__item {
    padding: 0;
    height: initial;
  }

  @media (hover: hover) {
    &__row &__item:hover,
    &__row &__item:hover:active {
      background-color: transparent;
    }
  }

  &__title {
    height: 34px;
    line-height: 34px;
  }

  &__option-menu {
    margin-left: auto;
    visibility: hidden;
    display: flex;

    & button {
      transition: none;
    }
  }

  &__new-row-button {
    margin-top: 12px;
  }

  &__editable-row-container {
    display: flex;
  }

  &__editable-row-input {
    flex: 1;
  }

  &__editable-row-input-wrap {
    flex: 1;
    margin-right: 18px;
  }

  &__edit-row {
    margin-left: 12px;
  }

  &__editable-row-buttons {
    display: flex;

    & > * {
      margin-right: 12px;
    }

    & > *:last-child {
      margin-right: 0;
    }
  }
}