.dig-toggle {
  $dig-switch-width: 60px;

  .dig-toggle-icon {
    $toggle-track-width: 36px;
    // $toggle-padding-right: calc($dig-switch-width - $toggle-track-width);

    padding: 4px 0px 6px 2px;
    margin-right: $desktop-gutter-mini;

    .dig-toggle-track {
      @include ease-out();
      width: $toggle-track-width;
      height: 14px;
      border-radius: 30px;
      background-color: $toggle-track-off-color;
    }

    .dig-toggle-thumb {
      @include ease-out();
      position: absolute;
      top: 1px;
      left: 2px;
      width: $toggle-size;
      height: $toggle-size;
      line-height: 24px;
      border-radius: 50%;
      background-color: $toggle-thumb-off-color;

      .dig-paper-container {
        border-radius: 50%;
      }

      .dig-touch-ripple,
      .dig-focus-ripple-inner {
        width: 200%;
        height: 200%;
        top: -10px;
        left: -10px;
      }
    }
  }

  &.dig-is-switched {
    .dig-toggle-icon {
      .dig-toggle-track {
        background-color: $toggle-track-on-color;
      }
      .dig-toggle-thumb {
        left: 18px;
        background-color: $toggle-thumb-on-color;
      }
    }
  }

  &.dig-is-disabled {
    .dig-toggle-icon {
      cursor: default;
      .dig-toggle-track {
        background-color: $toggle-track-disabled-color;
      }
      .dig-toggle-thumb {
        background-color: $toggle-thumb-disabled-color;
      }
    }
  }

  &.dig-is-required {
    .dig-toggle-icon {
      .dig-toggle-track {
        background-color: $toggle-track-required-color;
      }

      .dig-toggle-thumb {
        background-color: $toggle-thumb-required-color;
      }
    }
  }
}