.mode {
  position: relative;
  border: 0;
  padding: 0;
  line-height: 100%;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
  track-width = 50px;
  track-height = 24px;

  &--focus {
    .mode-thumb {
      box-shadow: 0 0 2px 3px #0099e0;
    }
  }

  &--checked {
    .mode-thumb {
      transform: translateX(track-width - track-height);
    }
  }

  &-track {
    border-radius: 30px;
    width: 50px;
    height: 24px;
    font-size: 0;
    background-color: convert(hexo-config('night_mode.button.bg_color') || '#8c8a8a');

    &-moon,
    &-sun {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      width: (track-width / 2);
      height: 100%;
      font-size: 14px;

      &::before {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 14px;
        line-height: track-height;
        text-align: center;
      }
    }

    &-moon {
      left: 0;

      &::before {
        if (hexo-config('night_mode.icon.dark')) {
          content: hexo-config('night_mode.icon.dark');
        } else {
          content: '🌜';
        }
      }
    }

    &-sun {
      right: 0;

      &::before {
        if (hexo-config('night_mode.icon.light')) {
          content: hexo-config('night_mode.icon.light');
        } else {
          content: '🌞';
        }
      }
    }
  }

  &-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    box-sizing: border-box;
    border: 1px solid #4d4d4d;
    border-radius: 50%;
    width: track-height - 2px;
    height: track-height - 2px;
    background-color: convert(hexo-config('night_mode.button.color') || '#fafafa');
    transition: transform .2s ease;
  }

  &-input {
    position: absolute;
    border: 0;
    width: 0;
    height: 0;
  }
}
