.swap__container {
  .swap-toggle {
    position: relative;
    padding: 4px;
    border-radius: 12px;
    height: 32px;
    width: 32px;
    margin-top: -18px;
    margin-bottom: -18px;
    left: calc(50% - 16px);
    top: -5px;
    background-color: #24243a;
    border: 5px solid var(--ls-surface-card);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      position: absolute;
      font-size: 12px;
      color: var(--ls-surface-400);
      transition: all 0.3s ease;
      opacity: 1;
    }
    img {
      position: absolute;
      margin-top: 12px;
      opacity: 0;
      transition: all 0.3s ease;
    }
    &:hover {
      background-color: rgba(110, 66, 202, 1);
      border-color: rgba(110, 66, 202, 1);
      i {
        opacity: 0;
        bottom: 999px;
        margin-bottom: 12px;
      }
      img {
        margin-top: 0px;
        opacity: 1;
      }
    }
  }
}