.modal-swap-settings {
  flex: 1 1 auto;
  margin-left: -1rem;
  overflow-y: auto;
  padding: 0px 1rem;
  position: relative;
  touch-action: pan-x pan-y;
  width: calc(100% + 2rem);
}
.modal-swap-settings__header {
  display: block;
  height: 1.5rem;
  position: relative;
  width: 100%;
}
.modal-swap-settings__header::after {
  background-color: transparent;
  bottom: -1px;
  content: " ";
  height: 1px;
  left: 0px;
  margin-left: -1rem;
  position: absolute;
  transition-duration: 0.2s;
  transition-property: background-color;
  transition-timing-function: ease-in-out;
  width: calc(100% + 2rem);
}
@media screen and (min-width: 768px) {
  .modal-swap-settings__header::after {
    margin-left: -1.25rem;
    width: calc(100% + 2.5rem);
  }
}
.modal-swap-settings__header:not([data-scroll="false"])::after {
  background-color: var(--dd-color-background-additional);
}
.modal-swap-settings__pad {
  display: block;
  height: 1.5rem;
  width: 100%;
}
.modal-swap-settings__item {
  display: flex;
  flex-direction: column;
}
.modal-swap-settings__item:not(:last-child)::after {
  background-color: var(--dd-color-stroke);
  content: "";
  display: block;
  height: 0.0625rem;
  margin: 1.5rem 0px 1.5rem -1rem;
  width: calc(100% + 2rem);
}
.modal-swap-settings__item-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .modal-swap-settings__item-title {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.modal-swap-settings__item-description {
  color: var(--dd-color-content-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: left;
}
.modal-swap-settings__item-input {
  background-color: var(--dd-color-background-additional);
  border: 1px solid var(--dd-color-background-additional);
  border-radius: 2rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0.375rem 0px;
  transition-duration: 0.2s;
  transition-property: background-color, border-color;
  transition-timing-function: ease-in-out;
  user-select: none;
  width: 100%;
}
.modal-swap-settings__item-input--set,
.modal-swap-settings__item-input:focus-within {
  background-color: var(--dd-color-background-main);
  border-color: var(--dd-color-accent-main);
}
.modal-swap-settings__item-input--same {
  background-color: var(--dd-color-background-main);
  border-color: var(--dd-color-background-additional) !important;
}
.modal-swap-settings__item-input-el-wrapper {
  align-items: center;
  color: transparent;
  display: flex;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.5rem;
  justify-content: center;
  line-height: 2.5rem;
  position: relative;
}
.modal-swap-settings__item-input-el {
  color: var(--dd-color-content-secondary);
  margin: auto;
  position: absolute;
}
.modal-swap-settings__item-input-el,
.modal-swap-settings__item-input-el input {
  transition-duration: 0.2s;
  transition-property: color;
  transition-timing-function: ease-in-out;
}
.modal-swap-settings__item-input-el--set,
.modal-swap-settings__item-input-el--set input {
  color: var(--dd-color-accent-main);
}
.modal-swap-settings__item-input-el--same,
.modal-swap-settings__item-input-el--same input {
  color: var(--dd-color-content-primary);
}
.modal-swap-settings__item-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.modal-swap-settings__item-row--padded {
  margin-bottom: 1.5rem;
}
.modal-swap-settings__item-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 0.5rem;
}
.modal-swap-settings__item-table-cell--wide {
  grid-column: 1 / 4;
}