.wowp-list {
  padding: 50px 46px 50px 16px;

  .wowp-field {
    input[type="text"] {
      min-width: unset;
      width: auto;
    }
  }
}


.wowp-toogle {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  width: 40px;
  height: 28px;
  border-radius: 50px;
  padding: 0 4px;

  &:focus,
  &:hover {
    color: #ffffff;
  }
}

.wowp-toogle span {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 8px;
}

.wowp-toogle.is-on {
  background-color: color-mix(in srgb, var(--wowp-color-green) 20%, white);
}

.wowp-toogle.is-on {
  span {
    background-color: var(--wowp-color-green);
  }

  &:focus,
  &:hover {
    span {
      background-color: color-mix(in srgb, var(--wowp-color-green) 90%, black);
    }
  }
}

.wowp-toogle.is-off {
  flex-direction: row-reverse;
  background-color: color-mix(in srgb, var(--wowp-color-red) 20%, white);
}

.wowp-toogle.is-off {
  span {
    background-color: var(--wowp-color-red);
  }

  &:focus,
  &:hover {
    span {
      background-color: color-mix(in srgb, var(--wowp-color-red) 90%, black);
    }
  }
}