.mmui-drop-choice {
  position: relative;
  min-height: 4rem;

  .mmui-drop-choice-body {
    width: 100%;

    .mmui-drop-select-summary {
      max-height: 135px;
      overflow-y: auto;
    }
  }

  .mmui-btn-dropdown {
    background-color: $mm-neutral-white;
    border: 0.1rem solid;
    border-radius: 0;
    border-color: $mm-neutral-gray-80;
    color: $mm-neutral-gray-80;
    min-height: 4rem;
    padding: 0.5rem 4.6rem 0 0.8rem;
    width: 100%;

    .mmui-tokens-summary-display {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: normal;
    }
  }

  .mmui-btn-dropdown-select {
    width: 100%;
    text-align: left;
  }

  .mmui-dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    margin: 8px 15px 0 0;
    pointer-events: none;
  }

  .mmui-drop-select-title {
    text-align: left;
    padding-left: 1rem;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 28px;
    font-weight: normal;
  }

  .mmui-drop-select-details {
    display: none;
  }

  .mmui-drop-select-body {
    padding: 10px;
    position: absolute;
    height: auto;
    width: 100%;
    background-color: $mm-neutral-white;
    z-index: 100;
    box-shadow: $mm-boxshadow;

    .mmui-form-group-scroll {
      overflow: auto;
      max-height: 250px;
      padding: 5px 20px 0 0;
      height: auto;
    }
  }
}

fieldset:disabled {
  .mmui-drop-choice {
    .mmui-btn-dropdown {
      border-color: $mm-neutral-gray-10;
      background: $mm-neutral-gray-10;
      color: $mm-seq-gray-50;
      .mmui-tokens {
        .mmui-token {
          border-color: $mm-seq-gray-50;
          background: $mm-neutral-gray-10;
          color: $mm-seq-gray-50;
        }
      }
    }
    .mmui-drop-choice-body {
      .mmui-drop-select-summary {
        .mmui-btn-dropdown {
          .mmui-drop-select-title {
            border-color: $mm-neutral-gray-10;
            background: $mm-neutral-gray-10;
            color: $mm-seq-gray-50;
            font-weight: normal;
          }
        }
      }
    }
  }
}

.mmui-drop-choice-collapsed {
  .mmui-token-display {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}

.mmui-token-remove {
  display: none;
  position: relative;
  top: 2px;
}

.mmui-token:hover {
  .mmui-token-remove {
    display: inline;
  }
}

.mmui-token-display {
  max-width: 225px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding-top: 4px;
  pointer-events: none;
}

.mmui-drop-choice-expanded {
  .mmui-drop-choice-body {
    position: absolute;
    z-index: 601;
  }

  .mmui-btn-dropdown {
    border: 1px solid $mm-core-digital-blue-70;
  }

  .mmui-drop-select-details {
    display: block;
  }

  .mmui-token-display {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-top: 4px;
  }

  .mmui-token-remove {
    display: none;
    position: relative;
    top: 2px;
  }
}

.mmui-drop-select {
  position: relative;

  .mmui-btn-dropdown {
    width: 100%;
    height: 4rem;
    padding-right: 4.6rem;
    color: $mm-neutral-black;
    background-color: $mm-neutral-white;
    border: 0.1rem solid;
    border-color: $mm-neutral-gray-80;
  }

  .mmui-btn-dropdown-select {
    width: 100%;
    text-align: left;
  }

  .mmui-dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px 15px 0 0;
    pointer-events: none;
  }

  .mmui-drop-select-title {
    color: $mm-neutral-gray-80;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 28px;
    font-weight: normal;
  }

  .mmui-drop-select-body {
    padding: 10px;
    position: absolute;
    height: auto;
    width: 100%;
    background-color: $mm-neutral-white;
    z-index: 100;
    box-shadow: $mm-boxshadow;

    .mmui-form-group-scroll {
      overflow: auto;
      max-height: 250px;
      padding: 5px 20px 0 0;
      height: auto;
    }
  }
}

.mmui-badge.mmui-token {
  white-space: nowrap;
  display: inline-block;
  margin: 0 8px 5px 0;
  padding: 2px 20px 2px 0.8rem;
  background-color: $mm-neutral-white;
  float: left;
  position: relative;
  max-width: 100%;
  text-align: left;

  .mmui-token-display {
    margin-right: 2px;
    display: inline-block;
  }

  .mmui-token-remove {
    padding-left: 1.6rem;

    i {
      pointer-events: none;
    }
  }
}