@mixin coordinateConversion() {
  .esri-coordinate-conversion {
    position: relative;
    cursor: default;
    width: 400px;
    font-size: $font-size--small;

    .esri-select option[disabled] {
      color: $interactive-font-color--disabled;
    }
  }

  .esri-coordinate-conversion.esri-disabled {
    color: $interactive-font-color--disabled;
    pointer-events: none;

    /* stylelint-disable-next-line order/order */
    @include icomoonIconSelector() {
      &::before {
        color: $interactive-font-color--disabled;
      }
    }
  }

  .esri-coordinate-conversion--no-basemap {
    padding: 1em;
    width: auto;
  }

  .esri-coordinate-conversion--capture-mode {
    .esri-coordinate-conversion__mode-toggle {
      background: $background-color--offset;
      color: $interactive-font-color;
    }
  }

  .esri-coordinate-conversion__conversion-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .esri-coordinate-conversion__display {
    @include wordbreak();

    flex: 1 1 auto;
    padding: 0.5em;
    min-height: 2em;
    direction: ltr;
  }

  .esri-coordinate-conversion__display:hover,
  .esri-coordinate-conversion__select-row:hover {
    background-color: $background-color--hover;
  }

  .esri-coordinate-conversion__input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: $cap-spacing auto $cap-spacing auto;
    width: 80%;

    label {
      display: flex;
      align-items: center;
    }
  }

  .esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] {
    flex: 1;
    margin: 0;
    height: 2em;
    font-size: $font-size--small;
  }

  .esri-coordinate-conversion__settings {
    display: flex;
    flex-direction: column;
    align-items: center;

    .esri-select {
      font-size: inherit;
    }
  }

  .esri-coordinate-conversion__settings-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: $cap-spacing;
    width: 60%;
  }

  .esri-coordinate-conversion__settings-group > * {
    margin-bottom: 0.5em;
  }

  .esri-coordinate-conversion__settings-group-horizontal {
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
  }

  .esri-coordinate-conversion__settings-group:last-child {
    margin-bottom: $cap-spacing--half;
    width: 100%;
    text-align: center;
  }

  .esri-coordinate-conversion__preview-coordinate {
    min-height: 1.25em;
  }

  .esri-coordinate-conversion__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--esri-widget-padding-y);

    .esri-coordinate-conversion__row-button {
      display: none;
    }
  }

  .esri-coordinate-conversion__row:hover .esri-coordinate-conversion__row-button {
    display: flex;
  }

  .esri-coordinate-conversion__row:focus-within .esri-coordinate-conversion__row-button {
    display: flex;
  }

  .esri-coordinate-conversion__pattern-input {
    width: 100%;
  }

  .esri-coordinate-conversion__tools {
    display: flex;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }

  .esri-coordinate-conversion__select-row {
    text-align-last: center;
  }

  .esri-coordinate-conversion__input-select {
    text-align-last: center;
  }

  .esri-coordinate-conversion__conversions-view {
    margin: var(--esri-widget-padding-y) 0;
  }

  .esri-ui-top-right .esri-coordinate-conversion__conversions-view,
  .esri-ui-top-left .esri-coordinate-conversion__conversions-view,
  .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-down {
    display: flex;
    flex-direction: column;

    .esri-coordinate-conversion__conversion-list {
      flex-direction: column;
    }
  }

  .esri-ui-bottom-right .esri-coordinate-conversion__conversions-view,
  .esri-ui-bottom-left .esri-coordinate-conversion__conversions-view,
  .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-up {
    display: flex;
    flex-direction: column-reverse;

    .esri-coordinate-conversion__conversion-list {
      flex-direction: column-reverse;
    }

    .esri-widget--button {
      .esri-icon-up,
      .esri-icon-down {
        transform: rotate(180deg);
      }
    }
  }

  .esri-coordinate-conversion__heading {
    display: flex;
    align-items: center;
    background-color: $background-color--offset;
    width: 100%;
    height: $button-height;

    .esri-widget__heading {
      margin: 0 auto;
    }
  }

  .esri-coordinate-conversion__popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    z-index: 1;
    background-color: $background-color--inverse;
    padding: 1em;
    width: 50%;
    animation: esri-fade-in 250ms linear;
    text-align: center;
    white-space: inherit;
    color: $interactive-font-color--inverse;
  }

  .esri-coordinate-conversion__clipboard-popup {
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    font-size: $font-size--tiny;
    pointer-events: none;
    user-select: none;
  }
}

@if $include_CoordinateConversion == true {
  @include coordinateConversion();
}