.param-refine {
  .refine-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: $param-margin;

    // Merge button changes color when at least 2 checkboxes have been selected
    button[name='merge'] {
      @include action-button;
      @include button-orange--fill;
      &:disabled {
        color: $text-muted;
        border-color: $text-muted;
        background-color: transparent;
      }
    }

    //launches the clustering modal
    button[name='cluster'] {
      @include action-button;
      @include button-orange;
      display: flex;
      margin-left: 1rem;
    }
  }

  .group-list-container {
    // Copied in ValueSelect.scss:.group-list-selector
    margin-top: 0.3rem;
    border: 1px solid $brand-orange;
    border-radius: 0.5rem;
    padding: 0.8rem 0.6rem 0.3rem;
  }

  .refine-groups {
    // list of "groups" (each group is a set of renames)
    max-height: 30rem;
    margin-top: $param-group-margin;
    @include font-sans-regular;
    font-size: 1.3rem; // "No values match your search" / "Loading" / "Column does not have any values"

    button {
      // "clear group" or "remove rename from group" button -- appear as inline text
      border: 0;
      margin: 0;
      padding: 0;
      color: $light-gray;
      background: transparent;
      font-size: 1.4rem;
      cursor: pointer;

      &:hover {
        color: $medium-gray;
      }
    }

    .refine-group {
      // group-name row: include checkbox; group-name input, expand checkbox, count, reset button
      overflow: hidden;
      // padding-right so span.count isn't flush with the scrollbar when there's a scrollbar
      padding: 0 0.5rem 0 0;
    }

    div.summary {
      display: flex;
      align-items: center;

      input.select {
        cursor: pointer;
      }

      label.expand {
        // "expand" checkbox -- renders as an icon, not the checkbox
        input {
          display: none;
        }
        cursor: pointer;
        margin: 0;
        padding: 0;
        line-height: 0; // give <label> the height of its <i class="icon">

        i.expand-caret {
          display: block;
          padding: 0.4rem;

          &::before {
            content: '';
            display: block;
            border: 1px solid transparent;
            border-top-color: currentcolor;
            border-right-color: currentcolor;
            width: 0.8rem;
            height: 0.8rem;
          }
        }

        input:not(:checked) + i.expand-caret {
          transform: translate(-0.4rem, 0) rotate(45deg);
        }

        input:checked + i.expand-caret {
          transform: translate(-0.2rem, -0.2rem) rotate(135deg);
        }
      }

      .rename-sizer {
        flex: 1 1 auto;
        position: relative;
        height: 2.7rem; // highest item in the flexbox -- sets height for alignment

        input.rename {
          // Click to rename value
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border: 0;
          margin: 0;
          padding: 0.4rem 0;
          font-size: 1.3rem;
          background: transparent;
          color: $brand-text--dark;
          text-overflow: ellipsis;

          &:hover {
            background-color: $dark-accent--soft;
          }
        }
      }

      .count-and-reset {
        margin-left: 0.8rem;
        @include font-sans-light;
        font-size: 1.3rem;
        line-height: 1;

        // Display the count normally. If there are edits, display a reset
        // button instead, only when the user hovers.
        button {
          display: none;
          font: inherit;
          color: $brand-text--dark;
          &:hover {
            color: $brand-text--darker;
          }
        }
      }
      &:hover .count-and-reset {
        button {
          display: block;
          & + span {
            // only if there's a "reset" button, hide span.count
            display: none;
          }
        }
      }
    }

    .refine-group.edited .summary input.rename {
      // Show edited values as bold
      font-weight: bold;
      color: $brand-text--darker;
    }

    ul.values {
      // details: list of values, each with a count and remove button
      display: block;
      list-style: none;
      margin: 0;
      padding: 0 0 0.5rem;

      & > li {
        display: flex;
        width: 100%;
        overflow: hidden;
        @include font-sans-light;
        font-size: 1.3rem;
        padding: 0.5rem 0 0 2.5rem;

        .value {
          flex: 1 1 auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .count-and-remove {
          margin-left: 0.8rem;
          position: relative;

          // Display the count normally. If the user hovers, display a remove
          // button instead -- but only if the button exists. (One can't remove
          // the value "A" from the group "A".)
          button {
            display: none;
            position: absolute;
            right: 0;
            top: 0.1rem;
            font-size: 1.2rem;
            line-height: 1.4;
            color: $brand-text--dark;
            &:hover {
              color: $brand-text--darker;
            }
          }
        }
      }
      li:hover {
        button {
          display: block;
          & + span {
            // only if there's a "reset" button, hide span.count.
            // Use `visibility`, not `display`, so layout won't be affected.
            visibility: hidden;
          }
        }
      }
    }
  }

  .zen-mode & {
    .refine-groups {
      max-height: calc(100vh - 38rem);
    }
  }
}

.refine-modal {
  font-size: 1.3rem;

  .refine-clusterer {
    .method {
      display: flex;

      .method-select {
        flex: 0 0 auto;
        margin-right: 1.6rem;

        .custom-select {
          @extend %custom-select;
          width: 13rem;
        }
      }

      .method-form {
        padding: 0 2rem;

        .method-description {
          @include content-1;
          flex: 1 1 auto;
          color: $brand-text--medium;
        }

        input[id='refine-clusterer-max-distance'] {
          background-color: $Vlight-gray;
          font-size: 1.4rem;
          height: 3.5rem;
          border: 2px solid $Vlight-gray;

          &:hover {
            border: 2px solid $dark-accent--medium;
          }
          &:focus {
            outline: none;
            border: 2px solid $brand-orange;
          }
        }
      }

      .form-group {
        margin-top: 1.6rem;
        width: 100%;
        display: flex;

        label {
          margin-right: 1.6rem;
          @include content-1;
        }
      }
    }
  }

  .refine-bins {
    margin-top: 2rem;

    .no-bins {
      @include title-2;
      font-size: 1.5rem;
      margin-bottom: 2rem;
      color: $brand-orange;
      margin-left: 16.5rem;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      @include title-2;
      font-size: 1.5rem;
      white-space: nowrap;
      padding-right: 4.2rem;
    }

    td {
      vertical-align: top;
      padding: 0.8rem 0; // default all padding to the same size. We'll shrink the tr.value padding later.
    }

    .value,
    .new-value {
      // Give these two _all_ the space
      width: 9999rem;
    }

    tr.bin {
      border-top: 1px solid $dark-accent--medium;
    }

    tr.value td {
      padding-top: 0;
    }
  }

  .autosize-cluster-input {
    width: 100%;
    margin: 0;
    position: relative;
    // TODO @extend .single-line-text-field;

    span,
    textarea {
      // Exact same font for invisible text and visible textarea
      font: inherit;
      word-break: break-all;
      padding: 0;
      border: 0;
    }

    span {
      visibility: hidden; // invisible text, sets the height of the div
    }

    textarea {
      position: absolute;
      top: 0.5rem;
      left: 1rem;
      width: 93%;
      height: 100%; // grow to the same size as the div
      resize: none;
      overflow: hidden;
    }
  }

  .modal-footer {
    .actions {
      display: flex;
      button[name='submit'] {
        @include button-orange--fill;
        &:disabled {
          opacity: 0.6;
          @include button-orange;
          &:hover {
            background-color: transparent;
          }
        }
      }
    }
  }

  .refine-status {
    flex-grow: 1; // left-align in modal footer
    text-transform: uppercase;
    color: $brand-orange;
  }
}
