&.style-1 {
  --toggle-bg-light: #EEE;
  --toggle-bg-dark: #444;
  --toggle-icon-color-light: #555;
  --toggle-icon-color-dark: #FFF;

  .toggle-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 50% 50% 0px;
    transition: transform 0.5s ease-in-out;

    &-wrap {
      width: calc(50px * var(--toggle-scale));
      aspect-ratio: 1;
      padding: .75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--toggle-bg-light);
      border-radius: 20%;
      box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
      position: relative;
      transition: background 0.5s ease-in-out;
    }

    &.__light {
      background-color: var(--toggle-icon-color-light);
      mask: url("../images/toggles/toggle1/light.svg") no-repeat center / contain;
      transform: translate3d(0, 0, 0);
    }

    &.__dark {
      background-color: var(--toggle-icon-color-dark);
      mask: url("../images/toggles/toggle1/dark.svg") no-repeat center / contain;
      transform: translate3d(0, -150%, 0);
    }
  }

  &.mode-dark {
    .toggle-icon {
      &-wrap {
        background: var(--toggle-bg-dark);
      }

      &.__light {
        transform: translate3d(0, 150%, 0);
      }

      &.__dark {
        transform: translate3d(0, 0, 0);
      }
    }
  }
}