.param-renames {
  padding-top: 0.5rem;
  max-height: 25rem;
  overflow-y: auto;

  .rename-entry:not(:first-child) {
    margin-top: $param-margin;
  }

  label {
    @include content-1;
    color: $labels;
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
    margin: 0;
  }

  .rename-container {
    position: relative; // to absolutely position button

    .rename-input {
      @include module-parameter;
      flex: 1 1 auto;
      padding: 0 1rem;
      white-space: nowrap;
      display: block;
      line-height: 3.3rem;
      width: 100%;
      resize: none;
      overflow: hidden;
      cursor: text;
      border-radius: 3px;
    }

    button.rename-delete {
      @extend .button-icon;
      cursor: pointer;
      font-size: 1.3rem;
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;
      bottom: 0.2rem;
      width: 3rem;
      height: auto; // override .button-icon
      background-color: transparent !important;
      opacity: 0;
      &::before {
        color: $medium-gray;
        opacity: 0.6;
      }
      &:hover::before {
        opacity: 1;
      }
    }

    &:hover .rename-delete {
      opacity: 1;
    }
  }
}
