&.layout-1 {
  border: 0;

  .toggle-icon {
    position: absolute;
    width: 50%;
    height: 50%;

    &-wrap {
      width: calc(var(--toggle-width) * var(--toggle-scale));
      aspect-ratio: 1;
      padding: var(--toggle-padding);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--toggle-bg-light);
      border-radius: var(--toggle-border-radius);
      border-width: var(--toggle-border-w);
      border-style: solid;
      border-color: var(--toggle-border-color-light);
      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-text-color-light);
      mask: var(--toggle-icon-light);
      top: auto;
    }

    &.__dark {
      background-color: var(--toggle-text-color-dark);
      mask: var(--toggle-icon-dark);
      top: -100%;
    }
  }

  &.mode-dark {

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

      &.__dark {
        top: auto;
      }

      &.__light {
        top: 100%;
      }

    }
  }

}